Angularjs 在指令中使用或注入服务

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 中。只有使用 module word 定义的模块才能作为模块的依赖项注入。因此，请尝试从模块防御中删除这些指令。

希望对您有所帮助。

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

注意控制器和指令定义中的依赖注入和缩小设置。

Angularjs 在指令中使用或注入服务

Angulajs use or inject services in directives

angularjs

angularjs-directive

angularjs-service