Injecting service to Directive

Question

Injecting service to Directive

I am trying to inject a service to Directive like below

 var app = angular.module('app',[]);
 app.factory('myData', function(){
     return {
        name : "myName"
     }
 });
 app.directive('changeIt',function($compile, myData){
    return {
            restrict: 'C',
            link: function (scope, element, attrs) {
                scope.name = myData.name;
            }
        }
 });

But this is returning me error Unknown provider: myDataProvider. Someone please look into the code and tell me if I am doing wrong somewhere..

angularjs

Answer 1

You can do injection on Directives, and it looks just like it does everywhere else.

app.directive('changeIt', ['$compile', 'myData', function($compile, myData){
    return {
        restrict: 'C',
        link: function (scope, element, attrs) {
            scope.name = myData.name;
        }
    }
 }]);

Answer 2

Change your directive definition from app.module to app.directive. Apart from that everything looks fine.

Btw, very rarely do you have to inject a service into a directive. If you are injecting a service ( which usually is a data source or model ) into your directive ( which is kind of part of a view ), you are creating a direct coupling between your view and model. You need to separate them out by wiring them together using a controller.

It does work fine. I am not sure what you are doing which is wrong. Here is a plunk of it working.

http://plnkr.co/edit/M8omDEjvPvBtrBHM84Am

( BUT YOU SHOULD NOT DO IT THIS WAY! )