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){ 
    //... 
    }])