AngularJS open modal dialog on button click

Question

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

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.

Hum this problem doesn't appear on my computer. Can you show us more code pls ? — Azylaans, Oct 23 '15 at 19:43
Hum yeah, maybe you have lots of code. Just a question, have you insert a directive "modal" in your code ? — Azylaans, Oct 23 '15 at 19:48
@John' no I haven't. It didn't show that in the example. How do I do that? Sorry I'm really new to AngularJS. I get lost easily :) — hollyquinn, Oct 23 '15 at 19:52

score 2 · Accepted Answer · edited May 23 '17 at 12:23

2

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 )

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

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

edited May 23 '17 at 12:23

Community

1
1

answered Oct 23 '15 at 19:52

Azylaans

981
8
18

Ok, that fixed my error message. I've tried the first article with the same results. I'm wondering if I'm missing something from my project and that is why it's not working? – hollyquinn Oct 23 '15 at 19:59
Your project looks good because you haven't error (so no dependency problem). All is there. About your modal, you have 2 choices : implement the "modal directive', or use $uibModal (more simple, see the doc (cf link above)). Code is strange (a controller specially for the modal) but simple ! – Azylaans Oct 23 '15 at 20:06
thanks. You gave me a lot to look over. I'm sure it will help me solve the problem. – hollyquinn Oct 23 '15 at 20:17

AngularJS open modal dialog on button click

1 Answers1