Angular bootstrap modal 导致 strict-di 错误，不知道为什么答案

【问题标题】：Angular bootstrap modal causing strict-di error, not sure whyAngular bootstrap modal 导致 strict-di 错误，不知道为什么
【发布时间】：2014-10-07 10:48:29
【问题描述】：

奇怪的问题，使用 Angular UI 引导模式我对 Angular 1.3 beta 16 完全没有问题，但是如果我启用 ng-strict-di 模式，我会收到以下错误：

Error: [$injector:strictdi] function($scope, $modalInstance) is not using explicit annotation and cannot be invoked in strict mode
http://errors.angularjs.org/1.3.0-beta.16/$injector/strictdi?p0=function(%24scope%2C%20xmodalInstance)
    at http://localhost:3000/vendor/angular.js:78:12
    at annotate (http://localhost:3000/vendor/angular.js:3353:17)
    at invoke (http://localhost:3000/vendor/angular.js:4037:21)
    at Object.instantiate (http://localhost:3000/vendor/angular.js:4070:23)
    at http://localhost:3000/vendor/angular.js:7451:28
    at http://localhost:3000/vendor/ui-bootstrap-tpls-0.11.0.min.js:8:28715
    at wrappedCallback (http://localhost:3000/vendor/angular.js:11616:81)
    at http://localhost:3000/vendor/angular.js:11702:26
    at Scope.$eval (http://localhost:3000/vendor/angular.js:12797:28)
    at Scope.$digest (http://localhost:3000/vendor/angular.js:12609:31)

奇怪的是这不在指令或服务中，它只是我的一个页面后面的脚本。我知道我正在那里制作一个控制器，但是……嗯，我现在不确定。以下是产生错误的代码：

            //=================
            //MODAL PROMPTER
            //=================

            var Prompt = function(title, prompt) {
                var modalInstance = $modal.open({
                    template: '<div class="modal-header"><h3 class="modal-title">' + title + '</h3></div><div class="modal-body"><p>' + prompt + '</p></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>',
                    controller: ModalInstanceCtrl,
                    size: 'sm'

                });

                modalInstance.result.then(function(result) {
                    console.log('Modal OK');
                }, function() {
                    console.log('Modal dismissed');
                });
            };

            var ModalInstanceCtrl = function($scope, $modalInstance) {
                $scope.ok = function() {
                    $modalInstance.close(true);
                };
                $scope.cancel = function() {
                    $modalInstance.dismiss(false);
                };
            };

            //end of modal
            //==================

            //call it immediately to see the error     
            Prompt('myTitle', 'myMessage');

我不确定我是如何或为什么收到错误的。如果我关闭 strict-di 它会完美运行。有什么想法吗？

【问题讨论】：

标签： javascript angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

您需要手动通告控制器的依赖项，因为您有 ng-strict-di enabled。

function ModalInstanceCtrl ($scope, $modalInstance) { //or var ModalInstanceCtrl = function(...

  $scope.ok = function () {
    $modalInstance.close(true);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss(false);
  };

};

ModalInstanceCtrl.$inject = ['$scope', '$modalInstance'];

【讨论】：

【解决方案2】：

从documentation看来，您需要在字符串数组中声明所有依赖注入。

还有其他方法，但通常我会这样做：

controller: ['$scope', '$modalInstance', ModalInstanceCtrl]

【讨论】：