각도 지시문로드 순서 : 컨트롤러에서 사용하는 경우 알 수없는 공급자

Question

컨트롤러 navCtrl을 사용하여 머리글 HTML에 click-anywhere-but-here이라는 지시문을 사용하려고합니다. 각도 던지고 오류 :

Unknown provider: clickAnywhereButHereProvider <-

나는이 내가 JS 파일을 연결하는 gulp을 사용하고 방법과 관련이있다 생각하고 있어요. 나는 모든 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', 
    ['$document', 'clickAnywhereButHereService', 
    function($document, clickAnywhereButHereService){ 
    //... 
    }])