Angulajs使用或注入服務的指令

Question

我是新來使用angularjs。我在一個分離文件中創建了一個指令和服務。當我將一個服務包含到指令中時會出現一個錯誤：[$ injector：modulerr]。

這裏是我的文件結構和文件： -

指令： - video_course.js

videoCourseApp.directive('mcssForm' ,function(){ 
     return{ 
      restrict : 'C', 
      templateUrl : 'assets/template_blocks/mcss_form.html', 
      link: function(scope,element,attribute){ 
      } 
     }; 
}); 

videoCourseApp.directive('addNewMsccOption', function(incrementId){ 
     return{ 
      replace: true, 
      restrict : 'C', 
      template : '<li><input name="test" type="radio" ng-model="videoCourseQuestions.mcss_option"/><input ng-model="videoCourseOptions.Option{{newid}}" type="text" class="option" placeholder = "Enter your Option{{newid}}" />', 
      link: function(scope,element,attribute){ 
       scope.newid = incrementId.getAndIncrement; 
      } 
     }; 
    }); 

這裏是我的服務文件： - videoservice.js

videoCourseApp.service('incrementId', function(){ 
    var index = 4; 
    this.getAndIncrement = function() { 
     return index++; 
    }; 
}); 

而在最後這裏是我的主要app.js文件，其中定義了所有方法： -

var videoCourseApp = angular.module('videocourse' , ['ngDragDrop','mcssForm','addNewMsccOption']); 

videoCourseApp.controller('video_course_add_question',function($scope, $timeout, $compile){ 


}); 

這裏是我的index.html文件： - >

<script src="assets/js/video_course/app.js"></script> 
<script src="assets/js/directives/video_course.js"></script> 
<script src="assets/js/services/video_services.js"></script> 

這會給注射器模塊的錯誤。問題在哪裏以及如何以適當的方式管理這些依賴關係。

Answer 1

你的問題是你定義模塊的方式。當所有這些指令已經在同一個模塊中時，您將該指令作爲依賴添加到模塊videoCourseApp。只有使用模塊字定義的模塊才能作爲模塊的依賴項注入。因此，請嘗試從模塊防禦中刪除這些指令。

希望有所幫助。

Answer 2

您的代碼應該看起來更像是：

var videoCourseApp = angular.module('videocourse' , ['ngDragDrop']); 

videoCourseApp.controller('video_course_add_question', ['$scope', '$timeout', '$compile', function($scope, $timeout, $compile){ 


}]); 

videoCourseApp.service('incrementId', function(){ 
     var index = 4; 
     this.getAndIncrement = function() { 
     return index++; 
    }; 
}); 

videoCourseApp.directive('addNewMsccOption', ['incrementId', function(incrementId){ 
    return{ 
     replace: true, 
     restrict : 'C', 
     template : '<li><input name="test" type="radio" ng-model="videoCourseQuestions.mcss_option"/><input ng-model="videoCourseOptions.Option{{newid}}" type="text" class="option" placeholder = "Enter your Option{{newid}}" />', 
     link: function(scope,element,attribute){ 
      scope.newid = incrementId.getAndIncrement; 
     } 
    }; 
}]); 

videoCourseApp.directive('mcssForm' ,function(){ 
    return{ 
     restrict : 'C', 
     templateUrl : 'assets/template_blocks/mcss_form.html', 
     link: function(scope,element,attribute){ 
     } 
    }; 
}); 

注意建立了依賴注入和微小控制器和指令定義。