javascript - 为什么 $modalinstance 不可用/注入(inject)？

Question

我试图展示一个简单的是/否模式，但我从一个问题转到另一个问题。我收到的当前错误消息是:

Error: [$injector:unpr] http://errors.angularjs.org/1.6.1/$injector/unpr?p0=%24modalInstanceProvider%20%3C-%20%24modalInstance%20%3C-%20MessageDialogCtrl
    at http://localhost:8080/web/bower_components/angular/angular.min.js:6:425
    at http://localhost:8080/web/bower_components/angular/angular.min.js:44:395
    at Object.d [as get] (http://localhost:8080/web/bower_components/angular/angular.min.js:42:92)
    at http://localhost:8080/web/bower_components/angular/angular.min.js:44:457
    at d (http://localhost:8080/web/bower_components/angular/angular.min.js:42:92)
    at e (http://localhost:8080/web/bower_components/angular/angular.min.js:42:333)
    at Object.invoke (http://localhost:8080/web/bower_components/angular/angular.min.js:42:418)
    at R.instance (http://localhost:8080/web/bower_components/angular/angular.min.js:93:35)
    at http://localhost:8080/web/bower_components/angular-bootstrap/ui-bootstrap.min.js:8:30298
    at http://localhost:8080/web/bower_components/angular/angular.min.js:133:460 Possibly unhandled rejection: {}

以下是负责模式显示的基本部分:

index.js

var emaApp = angular.module('emaApp', ['ui.bootstrap']);

function showMessageDialog($scope, $uibModal, title, message, buttons) {
    var messageScope = $scope.$new(true);
    messageScope.title = title;
    messageScope.message = message;
    messageScope.buttons = buttons;
    var modalInstance = $uibModal.open({
        templateUrl: 'js/messages/message-dlg.html',
        controller: 'MessageDialogCtrl',
        scope: messageScope
    });
    //setupKeyHandling(modalInstance);
    return modalInstance;
}

emaApp.controller('mainCtrl', ['$scope', '$http', '$uibModal', function($scope, $http, $uibModal) {

    $scope.deleteModel = function(modelId) {

        showMessageDialog($scope, $uibModal, 'Delete model',
                'Do you really want to delete the model "' + modelId + '"?',
                ['Yes', 'No', 'Cancel'])
                .result.then(function(result) {
                    alert('working..');
                });
    }

}]);

message-dlg-controller.js

/**
 * The controller for the yes/no/cancel.
 */
emaApp.controller('MessageDialogCtrl', [ '$scope', '$modalInstance', function($scope, $modalInstance) {
    $scope.primary = [ 'yes', 'ok' ];
    $scope.caption = {
        'yes' : 'Ja',
        'no' : 'Nein',
        'ok' : 'OK',
        'cancel' : 'Abbrechen'
    };
    $scope.close = function(button) {
        if (button == 'cancel') {
            $modalInstance.dismiss();
        } else {
            $modalInstance.close(button);
        }
    }
} ]);

message-dlg.html

<div class="modal-header">
    <h4 class="modal-title">{{title}}</h4>
</div>
<div class="modal-body">
    <p>{{message}}</p>
</div>
<div class="modal-footer">
    <button type="button" class="btn"
        data-ng-class="primary.indexOf(b) != -1 ? 'btn-primary' : 'btn-default'"
        data-ng-repeat="b in buttons" data-ng-click="close(b)">{{caption[b]}}</button>
</div>

包含的脚本:

    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>  

    <script src="js/index.js"></script>
    <script src="js/messages/message-dlg-controller.js"></script>

Answer 1

plnkr.co/edit/CeVr0heB2Av7vveCTUQ?p=preview

更改:使用$uibModalInstance代替$modalInstance