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

I am trying to do something, that I'm guessing should be fairly easy, but I can't figure it out. All I want to do is open a modal on the click of a button. I'm following this example. http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/displaying-a-modal-dialog.html

我想做点什么，我猜应该很简单，但我搞不清楚。我要做的就是在点击按钮时打开一个模态。我下面这个例子。http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/displaying-a-modal-dialog.html

Here's my controller:

这是我的控制器:

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;
};
});

Here's my view:

这是我的观点:

<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>

I'm getting the error message Error: [ng:areq] Argument 'MyCtrl' is not a function, got undefined. And the modal shows on the page when it loads. Thanks in advance.

我得到了错误消息:[ng:areq]参数'MyCtrl'不是函数，没有定义。加载时模态显示在页面上。提前谢谢。

1 个解决方案

#1

On your first line, you use "modal=" . It is a directive, you need to implement it in you code. (See here : AngularJS reusable modal bootstrap directive )

在第一行，您使用“modal=”。它是一个指令，你需要在代码中实现它。(参见这里:AngularJS可重用模式引导指令)

For the problem " Argument 'MyCtrl' is not a function, got undefined", it is a dependency problem I think. A similar problem here : Angularjs: Error: [ng:areq] Argument 'HomeController' is not a function, got undefined

对于“参数'MyCtrl'不是函数，没有定义”的问题，我认为这是一个依赖问题。这里有一个类似的问题:Angularjs: Error: [ng:areq]参数“HomeController”不是函数，没有定义

If you want implement a modal dialogbox, I advice you to see the official Bootstrap-Angular Doc here : https://angular-ui.github.io/bootstrap/

如果您想实现一个模态对话框，我建议您查看这里的官方引导-角度Doc: https://angular-ui.github.io/bootstrap/

#1