CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-service
Gitesh Purbia
Gitesh Purbia

Reputation: 1104

Angulajs use or inject services in directives

I am new to use angularjs. I have create a directives and service within a seprate files. When i including a service into directive there is a Error: [$injector:modulerr].

Here is my file structure and files :-

Directive :- 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;
            }
        };
    });

And here is my service file :- videoservice.js

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

And at finally here is my main app.js file where all methods are defined :-

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

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


});

Here is my index.html file:->

<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>

This will give error of injector module. Where is the problem and how can i manage these dependencies in proper way.

Upvotes: 0

Views: 78

Answers (2)

Artem K.
Artem K.

Reputation: 804

Your code should look more like:

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

Note the set up for dependency injection and minification in the controller and directive definitions.

Upvotes: 0

Omar.Alani
Omar.Alani

Reputation: 4130

Your problem is wity the way you define your module. You are adding the directives as dependencies to the module videoCourseApp when all these directives are already in the same module. Only modules defined with module word can be injected as dependencies for the module. So try to remove these directives from the module defension.

Hope that helps.

Upvotes: 2

Related Questions