AngularJS 单击按钮打开模式对话框

Question

我正在尝试做某事，我猜应该很容易，但我想不出来。我想要做的就是单击一个按钮打开一个模式。我正在关注这个例子。 http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/displaying-a-modal-dialog.html

这是我的控制器：

var app = angular.module("MyApp", ["ui.bootstrap.modal"]);

app.controller('MyCtrl', function ($scope) {
$scope.open = function () {
    $scope.showModal = true;
};

$scope.ok = function () {
    $scope.showModal = false;
};

$scope.cancel = function () {
    $scope.showModal = false;
};
});

这是我的观点：

<button class="btn" ng-click="open()">Open Modal</button>

<div modal="showModal" close="cancel()">
    <div class="modal-header">
        <h4>Modal Dialog</h4>
    </div>
    <div class="modal-body">
        <p>Example paragraph with some text.</p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-success" ng-click="ok()">Okay</button>
        <button class="btn" ng-click="cancel()">Cancel</button>
    </div>
</div>

我收到错误消息 Error: [ng:areq] Argument 'MyCtrl' is not a function, got undefined。模式在加载时显示在页面上。提前致谢。

Answer 1

在你的第一行，你使用 "modal=" 。它是一个指令，你需要在你的代码中实现它。（参见此处：AngularJS reusable modal bootstrap directive）

对于“Argument 'MyCtrl' is not a function, got undefined”的问题，我认为是依赖问题。这里有一个类似的问题：Angularjs: Error: [ng:areq] Argument 'HomeController' is not a function, got undefined

如果你想实现一个模态对话框，我建议你看官方Bootstrap-Angular文档：https://angular-ui.github.io/bootstrap/

AngularJS 单击按钮打开模式对话框

AngularJS open modal dialog on button click

twitter-bootstrap

angularjs

bootstrap-modal