AngularJS：在嵌套在指令内的控制器中注入 $modal 时出错答案

【问题标题】：AngularJS: Error when injecting $modal inside a controller that is nested inside of a directiveAngularJS：在嵌套在指令内的控制器中注入 $modal 时出错
【发布时间】：2014-06-02 21:01:10
【问题描述】：

我们有一个自定义指令，可以围绕复选框生成 html。这使用嵌入来注入其中传递的内容。它看起来像这样：

somecheckbox.js

angular.module('namespace.directives')
.directive('someCheckbox', function() {
  return {
    templateUrl: 'directives/checkbox.html';
    restrict: 'E',
    transclude: true
  }
}]);

指令/checkbox.html

<label class="styling" ng-transclude>
    ... some other html
</label>

我们在整个应用程序中广泛使用模态，并且正在将所有内容转换为引导程序的角度指令。我们创建了一个控制器来处理在整个应用程序中偶尔出现的特定类型的模式：

angular.module('namespace.controllers').controller('LegalModalController',
       ['$scope', '$modal',
function($scope,   $modal) {
  $scope.showLegalModal = function(title, legalTextLocation) {
    $modal.open({
      templateUrl: 'modals/legal.html',
      controller: 'sc.LegalModalInstanceController',
      resolve: {
        modalTitle: function() {
          return title;
        },
        template: function() {
          return eulaTextLocation;
        }
      }
    });
  };
}]);

回到指令部分，有一种情况我们需要在复选框指令中添加一个链接，该链接挂钩到法律控制器以弹出一个模式窗口。这是目前正在做的事情：

<some-checkbox>Click <a href ng-controller="LegalModalController" ng-click="showLegalModal()">here</a> to...</some-checkbox>

我们遇到的问题是，我们完全无法将 $modal 注入到控制器中而不会出现以下错误：

未知提供者：$modalProvider

我到处寻找，但我没有找到任何其他人在这种情况下。有谁知道这个问题的潜在根源是什么？这种链接适用于我们不使用指令的所有情况。

这是启动应用程序的 main.js 文件：

angular.module('namespace.modules.main', ['namespace.core', 'ui.select2', 'ngSanitize', 'ui.sortable', 'infinite-scroll', 'ui.bootstrap']).
config(['$routeProvider', '$locationProvider', '$httpProvider', '$compileProvider', 
function($routeProvider, $locationProvider, $httpProvider, $compileProvider) {
    routeProvider = $routeProvider;
    $locationProvider.html5Mode(true).hashPrefix('!');

    $httpProvider.defaults.headers.patch = {};
    $httpProvider.defaults.headers.patch['Content-Type'] = 'application/json; charset="UTF-8"';

    // Allow telephone hyperlinks
    $compileProvider.urlSanitizationWhitelist(/^\s*(https?|mailto|tel):/);

}]).run(
         ['$rootScope', '$location', '$timeout', '$window', '$route'
  function($rootScope,   $location,   $timeout,   $window,   $route) {
    // set up $rootScope and route provider here
});

【问题讨论】：

你在哪里声明 $modal 作为 namespace.controllers 的依赖？你可能没有
@mpm 你的意思是将ui.bootstrap 声明为依赖项吗？
ui.bootstrap 库在我们的 main.js 文件中声明，这是我们运行应用程序的地方。
您能否也包含该代码。我认为未知的提供程序错误是 ui-bootstrap 未正确注入的结果。 html中包含的引导程序也是如此
好的，我刚做了。这适用于我们没有在指令中引用 LegalModalController 的所有情况。

标签： javascript angularjs twitter-bootstrap checkbox

【解决方案1】：

我能够弄清楚。我们应用程序中失败的特定页面是它自己的模块，因此没有正确的引导 ui 依赖项。哎呀>.

【讨论】：