Question

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

一切都很好，模态正在打开，但它不会关闭。我试图使用$uibModalInstance但是当我尝试关闭模式时，根据上面链接中的示例，我得到以下消息：

angular.js：13424错误：[$ 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和bootstrap css 3.3.6

我的代码如下所示。我已尝试所有解决此问题的答案，但无法解决问题。我认为角度版本有一个问题，但在我去玩角度版本之前我想确保没有什么我错过了。我认为this answer会起作用，但没有运气。

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表示模态窗口（实例）依赖项，它与$uibModal服务不同。使用$uibModal打开模态，然后使用$uibModalInstance关闭。

您可以从this question获取提问，有关详细信息，请访问plunker示例from here。

它可能会帮助你

angular.js：13424错误：[$ injector：unpr]

2 个答案: