adding angular dependencies in a link function shared across multiple directives

Question

I have several directives that use the same link function. (The link function adds some extra state and html depending on the use case.) So I declared this as follows:

function common_linkfunc(){...}

var Directive_1 = function($scope, etc) {
   return {restrict:"E", ...
           link: common_linkfunc,
           controller: function($scope, etc) {...}
   };
}
Directive_1.$injects = ["$scope", "etc"];
angular.module("module").directive("D1", Directive_1)...;

First change was when link function required $compile. Next I need to add $templateCache and my question is how can I do this systematically?

My first approach was to rewrite common_linkfunc as

function foo($compile, $templateCache) {
    return common_linkfunc($compile, $templateCache) {...}
}

and then use this in every directive:

... link: foo($compile, $templateCache), ...

But this is copy-and-paste! Is there an easier and less error prone way to do the same?

Michael Benford · Accepted Answer · 2015-05-01 22:16:53Z

2

Regardless of the solution, you'll need to pass some argument to your common link function, because Angular won't inject anything into it for you. That being said, I can think of two different approaches:

1) Use arguments

app.directive('foo', function($http, $timeout) {
  return {
    restrict: 'E', 
    link: linkFn1.apply(null, arguments)
  }
});

function linkFn1($http, $timeout) {
  return function(scope, element, attrs) {
    // ...
  };
}

The downside here is that the order of the arguments in the directive function matters. If some other directive uses a different order, the code won't work properly.

2) Use $injector

app.directive('bar', function($injector) {
  return {
    restrict: 'E', 
    link: linkFn2($injector)
  }
});

function linkFn2($injector) {
  var $http = $injector.get('$http'),
      $timeout = $injector.get('$timeout');

  return function(scope, element, attrs) {
    // ...
  };
}

Working Plunker

answered May 1, 2015 at 22:16

Michael Benford

14.1k3 gold badges62 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dinesh Over a year ago

thanks - just learned something new! I think $injector is more flexible and much easier to adapt to changing needs.

Collectives™ on Stack Overflow

adding angular dependencies in a link function shared across multiple directives

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related