AngularJS angular-modal-service给我一个错误

Question

我正在尝试(不成功)使用AngularModalService.从公认的简单教程中执行复制/粘贴作业会给我一个错误.

这是教程,供参考:http: //www.dwmkerr.com/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(教程中的丑陋,但应该更简单)

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

我得到的错误是上面表示的行上的"未定义不是函数",即:

modal.element.modal();

谷歌搜索让我没有任何具体的东西.希望我只是忽略了一些愚蠢的事情.

Answer 1

angularModalService需要bootstrap js.在您的index.html文件中调用以下文件并尝试.

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