I'm trying (unsuccessfully) to use AngularModalService. Doing a copy/paste job from the admittedly simple tutorial gives me an error.

This is the tutorial, for reference: /

Javascript:

var app = angular.module('app', ['angularModalService']);

app.controller( 'Controller', function($scope,ModalService) {

    $scope.show = function() {
        ModalService.showModal({
            templateUrl: 'modal.html',
            controller: "ModalController"
        }).then(function(modal) {
            modal.element.modal(); // this is the problem
            modal.close.then(function(result) {
                $scope.message = "You said " + result;
            });
        });
    };
});

app.controller('ModalController', function( $scope, close ) {
    $scope.close = function(result) {
        close(result, 500);
    };
});

</script>

HTML (uglier in the tutorial, but should be simpler)

<div class="container" style="min-width: 700px; max-width: 700px; margin: 50px auto;" data-ng-app="app" data-ng-controller="Controller">
    <h3>Angular Modal Service</h3>
    <a class="btn btn-default" href ng-click="show()">Show a Modal</a>
    <p>{{message}}</p>

    <!-- The html template -->
    <script type="text/ng-template" id="modal.html">
        <div class="modal fade">
            <button type="button" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Yes or No?</h4>
        </div>
        <div class="modal-body">
            <p>It is your call...</p>
        </div>
        <div class="modal-footer">
            <button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal">No</button>
            <button type="button" ng-click="close('Yes')" class="btn btn-primary" data-dismiss="modal">Yes</button>
        </div>
    </script>

</div>

The error I get is "undefined is not a function" on the line denoted above, which is:

modal.element.modal();

Google search has lead me to nothing concrete. Hopefully I'm just overlooking something silly.

I'm trying (unsuccessfully) to use AngularModalService. Doing a copy/paste job from the admittedly simple tutorial gives me an error.

This is the tutorial, for reference: http://www.dwmkerr./the-only-angularjs-modal-service-youll-ever-need/

Javascript:

var app = angular.module('app', ['angularModalService']);

app.controller( 'Controller', function($scope,ModalService) {

    $scope.show = function() {
        ModalService.showModal({
            templateUrl: 'modal.html',
            controller: "ModalController"
        }).then(function(modal) {
            modal.element.modal(); // this is the problem
            modal.close.then(function(result) {
                $scope.message = "You said " + result;
            });
        });
    };
});

app.controller('ModalController', function( $scope, close ) {
    $scope.close = function(result) {
        close(result, 500);
    };
});

</script>

HTML (uglier in the tutorial, but should be simpler)

<div class="container" style="min-width: 700px; max-width: 700px; margin: 50px auto;" data-ng-app="app" data-ng-controller="Controller">
    <h3>Angular Modal Service</h3>
    <a class="btn btn-default" href ng-click="show()">Show a Modal</a>
    <p>{{message}}</p>

    <!-- The html template -->
    <script type="text/ng-template" id="modal.html">
        <div class="modal fade">
            <button type="button" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Yes or No?</h4>
        </div>
        <div class="modal-body">
            <p>It is your call...</p>
        </div>
        <div class="modal-footer">
            <button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal">No</button>
            <button type="button" ng-click="close('Yes')" class="btn btn-primary" data-dismiss="modal">Yes</button>
        </div>
    </script>

</div>

The error I get is "undefined is not a function" on the line denoted above, which is:

modal.element.modal();

Google search has lead me to nothing concrete. Hopefully I'm just overlooking something silly.

• javascript
• angularjs
• modal-dialog

• The tutorial is using Angular 1.2.9. What version are you using? – Reactgular Commented Nov 23, 2014 at 17:12

2 Answers 2

angularModalService requires bootstrap js. Call the following file in your index.html file and try.

<script src="http://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

The error happens because you are calling the Bootstrap method to show the modal.

Contrary to Asik's answer above, AngularModalService does not require Bootstrap, but if you are using Bootstrap modals then you do need to include the bootstrap js file.

The issue is referenced here: https://github./dwmkerr/angular-modal-service/issues/14

Custom modals, not requiring Bootstrap, are shown in the examples page