How to have shared functionality between a service and directive

Question

I have some common functionality between a directive and a service. I'd really like to not copy the code between the two items. Is it possible to inject a service into a directive?

Good post about what can be injected: http://stackoverflow.com/questions/16828287/what-things-can-be-injected-into-others-in-angular-js — Dan, Jun 08 '13 at 20:17

score 2 · Accepted Answer · answered Jun 08 '13 at 20:16

2

Yes. In your directive simply do this:

.directive('directiveName', ['ServiceName', function(ServiceName) {
  return {
    link: function(...) {
      ServiceName.doSomething();
    }
  }
}]);

answered Jun 08 '13 at 20:16

rtcherry

4,840
22
27

score 1 · Answer 2 · answered Jun 08 '13 at 20:27

Yeah, that's like one the main things services are for. You can inject to the outer function of your directive declaration:

myModule.directive('myDirective', function(awesomeService) {
  return {
    link: function(scope, element, attrs) {
      awesomeService.doSomethingAwesome();
    }
  };
});

Or, if your directive is using a controller, just inject it there:

var myDirectiveCtrl = function(awesomeService) {
  awesomeService.doSomethingAwesome();
};

myModule.directive('myDirective', function() {
  return {
    controller: myDirectiveCtrl,
    require: 'myDirectiveCtrl',
    link: function(scope, element, attrs, ctrl) {
      ctrl.doStuffMaybe();
    }
  };
});

How to have shared functionality between a service and directive

2 Answers2