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){ 
     } 
    }; 
}); 

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