Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Do the parameters of a directive's link function rely on DI?

In:

module.directive 'name', ->   (scope, element, attr) ->     # Whatever implemenation 

Do the scope, element and attrs parameters of the link function rely on name-inferred Dependency-Injection? If yes, how can I make them minification proof ?

Or do they rely on good old arguments order for what's passed into them ?

like image 884
ejoubaud Avatar asked Apr 08 '13 04:04

ejoubaud


People also ask

What does link function do in a directive?

Link: The link function deals with linking scope to the DOM. While defining a custom directive we have the option to define a link against which either we can define a function or we have the option to assign an object which will have pre & post function.

How does dependency Injection work in AngularJS?

Dependency Injection is a software design in which components are given their dependencies instead of hard coding them within the component. It relieves a component from locating the dependency and makes dependencies configurable. It also helps in making components reusable, maintainable and testable.

What is the difference between controller and link in directives?

In my opinion, we use controller when we need to share or reuse $scope data or we want directive interactive with each other. link is used for DOM manipulation tasks. This article compare the difference of controller and link in AngularJS directive with example, you could refer to it.

Which components supports dependency Injection mechanism in AngularJS?

Which Component can be Injected as a Dependency In AngularJS? In Angular. JS, dependencies are injected by using an “injectable factory method” or “constructor function”. These components can be injected with “service” and “value” components as dependencies.


2 Answers

No, the link function has a predefined set of parameters.

function link($scope, $element, attrs, ctrl) {     //Your method } 

They are

  1. Scope of the element
  2. The element itself (jquery/mini jquery wrapped)
  3. Attribute set of the element
  4. Any controllers used in required
like image 196
Arun P Johny Avatar answered Sep 20 '22 05:09

Arun P Johny


If you want to use DI with a directive (as I did), put the arguments to be injected in the directive factory function instead of the link function:

module.directive('name', function($timeout) {     return function(scope, element, attrs) {         ...     }; }); 

To allow for minification, put the function argument in an array like you do for controllers:

module.directive('name', ['$timeout', function($timeout) {     return function(scope, element, attrs) {         ...     }; }]); 

See the current time example in the docs.

Edit: See here for a demo that injects the $timeout service. You can do the same thing when returning a directive (e.g. return {restrict: 'E', link: function() {...}}) object instead of a function.

like image 23
z0r Avatar answered Sep 21 '22 05:09

z0r