angular.js:13424 Error: [$injector:unpr]

Question

我正在使用 angular-ui-bootstrap 库来实现 bootstrap 模式 - 请参阅 here。

一切正常，模态正在打开，但不会关闭。我曾尝试使用 $uibModalInstance，但是当我尝试关闭模式时，按照上面 link 中的示例，我收到以下消息：

angular.js:13424 Error: [$injector:unpr] http://errors.angularjs.org/1.5.3/$injector/unpr?p0=%24uibModalInstanceProvider%20%3C-%20%24uibModalInstance%20%3C-%20testCtrl

我正在使用 Angular 版本 1.5.3，ui-bootstrap-tpls v1.3.1 and bootstrap css 3.3.6

我的代码如下所示。我已经尝试了处理同一问题的所有答案，但无法解决问题。我认为 angular 版本存在问题，但在我尝试使用 angular 版本之前，我想确保没有遗漏任何内容。我以为会起作用，但没有这样的运气。

app.js

var app = angular.module('testApp', ['ui.bootstrap'])

.config(function($routeProvider) {
    $routeProvider. 
       when('/', {
         templateUrl: 'app/views/address-book.html',
         controller: 'testCtrl as ctrl'
       }).
       otherwise({
         redirectTo: '/'
       });
})

.controller('testCtrl', ['$uibModal', '$uibModalInstance', function ($uibModal, $uibModalInstance) {

    this.open = function () {
        testCtrl.modalInstance = $uibModal.open({
          templateUrl: 'app/views/partials/form.html',
          controller: 'testCtrl as ctrl'
        });
    }

    this.close = function() {
        console.log(testCtrl.modalInstance) //this shows undefined
        testCtrl.modalInstance.close();
    }
}]);

html

<a class="enterNewAddressBtn" ng-click="ctrl.open()">Enter new address</a>

form.html

<form>
    <input ng-model="ctrl.name" type="text">
    <button class="cancel-btn" ng-click="ctrl.close()">Cancel</button>
</form>

Answer 1

如果我没记错的话，在使用 $uibModal.open();

创建模态之前，您不能注入 $uibModalInstance

将 $uibModalInstance 的注入移动到 touchnoteCtrl，它应该可以正常工作。

Answer 2

显示此错误是因为您想在创建模态实例之前注入 $uibModalInstanceProvider。如果您使用不同的控制器并在 modalInstance 控制器中注入 $uibModalInstance，则此错误将被删除。

最好为 $uibModal 和 $uibModalInstance 使用不同的控制器。 $uibModalInstance 表示模态 window（实例）依赖关系，它与 $uibModal 服务不同。使用 $uibModal 打开模式，使用 $uibModalInstance.

关闭模式

您可以从 and for more details can visit plunker example from here 获得创意。

它可能会对你有所帮助

angular.js:13424 Error: [$injector:unpr]

angular.js:13424 Error: [$injector:unpr]

javascript

angularjs

angular-ui-bootstrap