javascript - Angular Bootstrap-UI 模态抛出错误

Question

我的代码是这样的

<div id="palletapp" class="content" ng-app='myApp' ng-controller="MainCtrl" style="display: none">


        <script type="text/ng-template" id="myModalContent.html">
                <div class="modal-header">
                    <h3 class="modal-title">I'm a modal!</h3>
                </div>
                <div class="modal-body">
                    <ul>
                        <li ng-repeat="item in items">
                            <a ng-click="selected.item = item">{{ item }}</a>
                        </li>
                    </ul>
                    Selected: <b>{{ selected.item }}</b>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" ng-click="ok()">OK</button>
                    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
                </div>
            </script>
        <button class="btn btn-default" ng-click="open()">Open me!</button>

    </div>



 angular.module('myApp', ['angular-loading-bar', 'ui.bootstrap']).controller('MainCtrl', [
    '$http', '$scope', '$modal', '$filter', function ($http, $scope, $filter, $modal) {
        $scope.open = function(size) {
            var modalInstance = $modal.open({
                templateUrl: 'myModalContent.html',
                controller: 'ModalInstanceCtrl',
                size: size,
                resolve: {
                    items: function() {
                        return $scope.items;
                    }
                }
            });
        }
    }
]);

我觉得一切正常。但是在单击按钮时会引发错误。

TypeError: undefined is not a function. at line 
  var modalInstance = $modal.open({

我已将 Bootstrap-UI 引用和所有内容正确添加到页面。谁能指出我做错了什么？

Answer 1

您以错误的顺序注入(inject)依赖项:

'$http', '$scope', '$modal', '$filter', function ($http, $scope, $filter, $modal) {

请注意，$modal 服务是列表中的第三个服务。