Question

我正在尝试根据某些条件打开模式弹出窗口。但是我收到以下错误 Error: [$injector:unpr] http://errors.angularjs.org/1.2.3/$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal at Error (<anonymous>)

以下是我的代码：“ui.bootstrap”包含在应用程序中。

angular.module('myApp').controller('myController', function ($scope, $timeout, $location, $window, $log, $rootScope, $modal) {

$scope.selectRow = function (position) {

    $scope.changed = false;
    if ($scope.select !== undefined && $scope.selectedRow !== position){
           $scope.changed = true;
           $scope.open();
    }
    $scope.select = position;
};


$scope.open = function () {
    console.log('Opening modal');
    var modalInstance = {
        templateUrl: 'modal.html',
        dialogClass: 'modal-selection',
        controller: ModalInstanceCtrl
    };
    $modal.open(modalInstance);
};


var ModalInstanceCtrl = function ($modalInstance) {

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

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

我的HTML：

<div id="modal-select" >
    <h3>
        Choose appropriate change
    </h3>
    <div>
        <ul>
            <li><a href="#">Change 1</a></li>
            <li><a href="#">Change 2</a></li>
            <li><a href="#">Change 3</a></li>
            <li><a href="#">Change 4</a></li>
        </ul>
    </div>
    <div>
        <button class="button" ng-click="cancel()">
            Cancel
        </button>
        <button class="button" ng-click="ok()">
            Done
        </button>
    </div>
</div>

Answer 1

来自Angular网站： This error results from the $injector being unable to resolve a required dependency. To fix this, make sure the dependency is defined and spelled correctly. For example

你有'ui.bootstrap'作为当前模块的依赖吗？

angular.module('myApp').controller('myController', function ($scope, $timeout, $location, $window, $log, $rootScope, $modal)

应该是：

angular.module('myApp', ['ui.bootstrap']).controller('myController', function ($scope, $timeout, $location, $window, $log, $rootScope, $modal)

Answer 2

错误是因为我有ui.bootstrap 0.5.0。我更新到0.6.0并重建应用程序以包含此问题并修复了问题。

Answer 3

我通过简单地附加$ modal.open（{...到$ scope.modalInstance变量。

来解决这个问题。

(function () {
var app = angular.module('app');

app.controller('ModalCtrl', [
    '$scope', '$modal', function ($scope, $modal) {
        $scope.modalInstance = {};
        $scope.open = function () {
            $scope.modalInstance = $modal.open({
                templateUrl: 'Template id goes here',
                controller: 'ModalInstanceCtrl'
            });
        };

    }
]);  })();

'ModalInstanceCtrl'

(function () {
var app = angular.module('app');

app.controller('ModalInstanceCtrl',  function ($scope, $modalInstance) {
        $scope.submit = function (myForm) {
            //submit code goes here
        };

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

在角度中注入$ modal时出错

3 个答案: