Angular指令加载指令：在控制器中使用未知提供程序

Question

我想在我的标题HTML中使用指令click-anywhere-but-here，使用控制器navCtrl。角抛出错误：

Unknown provider: clickAnywhereButHereProvider <-

我想这与我在如何使用gulp来串联JS文件来做。我用全部JS检查了级联的main.js文件，并且看到navCtrl被定义在clickAnywhereButHere指令的上方。由于控制器根本没有使用该指令，因此不确定这是否重要，只有header.html文件。

<header ng-controller="navCtrl"> 
    <a click-anywhere-but-here="clickedSomewhereElse()" ng-click="clickedHere()"> 
    <li>study</li> 
    </a> 
</header> 

如何强制标题等到clickAnywhereButHere指令在抱怨之前加载？

---

编辑：代码：

navCtrl.js：我已经烧毁了很多无关的代码的

angular 
    .module('DDE') 
    .controller('navCtrl', ['$rootScope', '$location', '$scope', 'Modal', 'Auth', '$window', '$state', 'deviceDetector', 
     function($rootScope, $location, $scope, Modal, Auth, $window, $state, deviceDetector) { 

      $scope.clicked = ''; 
      $scope.clickedHere = function(){ 
       $scope.clicked = 'stop that'; 
       console.log('clicked on element'); 
      }; 
      $scope.clickedSomewhereElse = function(){ 
       console.log('clicked elsewhere'); 
       $scope.clicked = 'thanks'; 
      }; 

      $scope.headings = [ 
       {page: 'contact', route: '#/contact'} 
      ]; 
     } 
    ]); 

clickAnywhereButHere.js指令：

angular.module('DDE') 
.directive('clickAnywhereButHere', function($document, clickAnywhereButHereService){ 
    return { 
     restrict: 'A', 
     link: function(scope, elem, attr, ctrl) { 
      var handler = function(e) { 
       e.stopPropagation(); 
      }; 
      elem.on('click', handler); 

      scope.$on('$destroy', function(){ 
       elem.off('click', handler); 
      }); 

      clickAnywhereButHereService(scope, attr.clickAnywhereButHere); 
     } 
    }; 
}); 

clickAnywhereButHereService.js服务：

angular.module('DDE') 
.factory('clickAnywhereButHereService', function($document){ 
    var tracker = []; 

    return function($scope, expr) { 
     var i, t, len; 
     for(i = 0, len = tracker.length; i < len; i++) { 
      t = tracker[i]; 
      if(t.expr === expr && t.scope === $scope) { 
       return t; 
      } 
     } 
     var handler = function() { 
      $scope.$apply(expr); 
     }; 

     $document.on('click', handler); 

     // IMPORTANT! Tear down this event handler when the scope is destroyed. 
     $scope.$on('$destroy', function(){ 
      $document.off('click', handler); 
     }); 

     t = { scope: $scope, expr: expr }; 
     tracker.push(t); 
     return t; 
    }; 
}); 

两个指令和服务都存在于我min文件：

Answer 1

你需要考虑到一个事实，即your JS is minified。

所以改变这种

.directive('clickAnywhereButHere', function($document, clickAnywhereButHereService){ 

这个

.directive('clickAnywhereButHere', 
    ['$document', 'clickAnywhereButHereService', 
    function($document, clickAnywhereButHereService){ 
    //... 
    }])