AngularJS - 另一个注入器问题答案

【问题标题】：AngularJS - another injector issueAngularJS - 另一个注入器问题
【发布时间】：2014-07-10 15:07:51
【问题描述】：

这个依赖注入有什么问题？每次我将 modalController 注入......好吧，任何东西......我都会遇到注入器错误。我已经将 js 文件作为脚本引用包含在内，并且我引用了我的模态模块。这是实际的错误：

错误：[$injector:unpr] http://errors.angularjs.org/1.3.0-beta.13/$injector/unpr?p0=modalControllerProvider%20%3C-%20modalController

personnelModule.controller('PersonnelController', ['$scope', 'personnelFactory','modalController', function($scope, personnelFactory, modalController){
    personnelFactory.getPersonnel().then(function(personnel){
        $scope.personnel = personnel;
        $scope.events = {};
        $scope.events.addPerson = function() {
            $modal.open({
              templateUrl: '../SiteAssets/views/ModalTemplate.html',
              controller: modalController
            });
        };
    });
}]);

modalModule.controller('modalController', ['$scope', '$modalInstance', function($scope, $modalInstance){
      $scope.ok = function () {
        alert('ok clicked');
        $modalInstance.dismiss('canceled'); 
      };
      $scope.cancel = function () {
        alert('cancel clicked');
        $modalInstance.dismiss('canceled'); 
      };
}]);

【问题讨论】：

也许你还没有注入 modalModule 作为 personnelModule 的依赖项？实例化personnelModule 时，您将执行angular.module("personnelModule", ["modalModule"])，以使modalController 可用（假设您将modalModule 实例化为angular.module("modalModule", [])）。
我的模块如下所示： var modalModule = angular.module('modal', ['ui.bootstrap']);和 var personModule = angular.module('personnel', ['skills', 'modal', 'ui.bootstrap']);此外，我可以成功地在该模块中注入工厂。如果我尝试在同一个模块中注入，这也不起作用。
看起来应该可以正常工作！我能想到的唯一另一件事是加载 js 文件的顺序。也许您在 personnelModule 之前初始化您的 modalModule 以便它存在并且在初始化 personnelModule 时不会引发错误，但也许您的 personnelController 在声明 modalController 之前初始化？我只是假设这一点，因为您的模块存储在变量中的事实暗示您可能会将同一模块中的内容分散到不同的文件中。
附带说明，如果只需要设置modal的控制器可以使用controller: 'modalController'
我将我的模块存储在变量中，因为我是新手，这就是谷歌教程中教授的方式，但我实际上将与模块相关的所有内容保存在同一个文件中。

标签： angularjs

【解决方案1】：

尝试将控制器引用为字符串。（在 $modal.open 中）

controller: 'modalController'

编辑

您还需要将 $modal 服务注入“PersonnelController”，我认为注入“modalController”是不必要的。

personnelModule.controller('PersonnelController', ['$scope', 'personnelFactory', '$modal', function($scope, personnelFactory, $modal){

编辑 2

试试this Plunker。我所做的最显着的更改是删除了

<div ng-controller="modalController"></div>

和

<button ... ng-click="ok()">OK</button>

【讨论】：

不...仍然无法正常工作。我假设您的意思是在 $modal.open 函数中......对吗？事实上，即使我从该函数中删除控制器：modalController，我也会得到同样的错误
是的，你是对的——对于歧义感到抱歉。您收到的具体错误是什么？
好吧，移除 modalController 注入当然可以防止该错误，但是由该控制器控制的我的模态按钮也不起作用......模态 HTML 被包装在一个带有 ng-controller= 的 div 中“modalController”和我的按钮是 ng-click="ok" 和 ng-click="cancel"...我认为这是对的？所以我不确定modalController是否真的被调用了......
我得到的错误是：错误：[$injector:unpr]errors.angularjs.org/1.3.0-beta.13/$injector/…
好吧，您不需要在模态 HTML 中定义控制器，所以我会删除它（尽管我不确定它是否会导致您的问题）。可以发plunker吗？

【解决方案2】：

不要将控制器相互注入。我的意思是，你为什么要那样做？？

【讨论】：