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/