Question

82

Angular JS: What is the need of the directive’s link function when we already had directive’s controller with scope?

rated 0 times [ 88] [ 6] / answers: 1 / hits: 170820 / 11 Years ago, sat, november 16, 2013, 12:00:00

I need to perform some operations on scope and the template. It seems that I can do that in either the link function or the controller function (since both have access to the scope).

When is it the case when I have to use link function and not the controller?

angular.module('myApp').directive('abc', function($timeout) {

    return {

        restrict: 'EA',

        replace: true,

        transclude: true,

        scope: true,

        link: function(scope, elem, attr) { /* link function */ },

        controller: function($scope, $element) { /* controller function */ }

    };

}

Also, I understand that link is the non-angular world. So, I can use $watch, $digest and $apply.

What is the significance of the link function, when we already had controller?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ellisc

Add To Favorites

Follow

Total Points: 533

Total Questions: 82

Total Answers: 90

Location: Bangladesh

Member since Thu, Aug 5, 2021

3 Years ago

ellisc questions

1 Get entire Playwright page in html and Text

Mon, Nov 15, 21, 00:00, 3 Years ago

1 tiptap - Insert node below / at the end of the current one

Sat, Jun 26, 21, 00:00, 3 Years ago

1 Deleting tweets with JS console

Mon, Nov 16, 20, 00:00, 4 Years ago

1 Discord.js Embed Random Image

Sun, Apr 26, 20, 00:00, 4 Years ago

1 Material UI vertical Slider. How to change the thickness of the rail in vertical material UI Slider (React)

Mon, Mar 9, 20, 00:00, 4 Years ago

View All

answered 11 Years ago austenjordang · Accepted Answer

After my initial struggle with the link and controller functions and reading quite a lot about them, I think now I have the answer.

First let's understand,

How do AngularJS directives work in a nutshell:

We begin with a template (as a string or loaded to a string)

var templateString = '<div my-directive>{{5 + 10}}</div>';

Now, this templateString is wrapped as an angular element

var el = angular.element(templateString);

With el, now we compile it with $compile to get back the link function.

var l = $compile(el)

Here is what happens:
- $compile walks through the whole template and collects all the directives that it recognizes.
- All the directives that are discovered are compiled recursively and their link functions are collected.
- Then, all the link functions are wrapped in a new link function and returned as l.

Finally, we provide scope function to this l (link) function which further executes the wrapped link functions with this scope and their corresponding elements.

l(scope)

This adds the template as a new node to the DOM and invokes controller which adds its watches to the scope which is shared with the template in DOM.

enter

Comparing compile vs link vs controller :

Every directive is compiled only once and link function is retained for re-use. Therefore, if there's something applicable to all instances of a directive should be performed inside directive's compile function.

Now, after compilation we have link function which is executed while attaching the template to the DOM. So, therefore we perform everything that is specific to every instance of the directive. For eg: attaching events, mutating the template based on scope, etc.

Finally, the controller is meant to be available to be live and reactive while the directive works on the DOM (after getting attached). Therefore:

(1) After setting up the view[V] (i.e. template) with link. $scope is our [M] and $controller is our [C] in M V C

(2) Take advantage the 2-way binding with $scope by setting up watches.

(3) $scope watches are expected to be added in the controller since this is what is watching the template during run-time.

(4) Finally, controller is also used to be able to communicate among related directives. (Like myTabs example in https://docs.angularjs.org/guide/directive)

(5) It's true that we could've done all this in the link function as well but its about separation of concerns.

Therefore, finally we have the following which fits all the pieces perfectly:

diagram