PreLink, PostLink and Controller Methods of Angular Directives

PreLink, PostLink and Controller Methods of Angular Directives

Link function of an Angular Directive
As the name implicates, the link function has the duty of linking the model to the templates. Link function is the place where AngularJs does the data binding to the compiled templates. Let’s take a look at the signature of a link function.

link: function LinkFn(scope, elem, attr, ctrl){}

There are 4 parameters available to the link function.

scope : The scope of the directive
elem : Dom element where the directive is applied
attr : Collection of attributes of the Dom Element
ctrl : Array of controllers required by the directive

Now let’s create a simple directive to see how the data binding works.

var app = angular.module('app', []);
app.directive('dad', function () {
    return {
        restrict: 'EA',
        template: '<div>{{greeting}}{{name}}</div>',
        link: function(scope,elem,attr){
            scope.name = 'Paul';
            scope.greeting = 'Hey, I am ';
        }
    };
});

<div ng-app="app">
    <dad></dad>
</div>

The name and greeting properties attached to the scope are linked to the template once the link function is executed. And, the browser will show “Hey, I am Paul” in the view.

The above is the usual way to create a link function inside a directive. However, AngularJs allows to set the link property to an object also. Advantage of having an object is, we can split the link function into two separate methods called, pre-link and post-link.

Both Pre & Post link functions have the same syntax as defined below but the only difference is the order in which they get executed.

Pre-linking function Executed before the child elements are linked. Not safe to do DOM transformation since the compiler linking function will fail to locate the correct elements for linking.

Post-linking function Executed after the child elements are linked. It is safe to do DOM transformation in the post-linking function.

Lets start by defining a simple directive

var mod = angular.module('Mod', []);

           mod.directive('myDir', function () {

               return {

                   restrict: 'E',

                   controller: function ($scope, $element) {

                       console.log(': controller');

                       console.log($element.html());

                   },

                   compile: function (tElem, tAttrs) {

                       console.log(': compile');

                       console.log(tElem.html());

                       return {

                           pre: function (scope, iElem, iAttrs) {

                               console.log(': pre link');

                               console.log(iElem.html());

                           },

                           post: function (scope, iElem, iAttrs) {

                               console.log(': post link');

                               console.log(iElem.html());

                           }

                       }

                   }

               }

           });

Let’s use it in our html code like this

<my-dir>

     Parent

     <my-dir>Child</my-dir>

</my-dir>

Above we have defined a very simple directive using all important functions of a directive. We have nested that directly in itself and added parent/child text in the template. Now if we see the output we know the order in which these directives get executed.

: compile

Parent

<my-dir>Child</my-dir>

: compile

Child

: controller

Parent

<my-dir>Child</my-dir>

: pre link

Parent

<my-dir>Child</my-dir>

: controller

Child

: pre link

Child

: post link

Child

: post link

Parent

<my-dir>Child</my-dir>

Looking at the above we can see the order in which these functions execute. This order is always very important, the reason we will see later.

So to conclude the order is:
Compile Parent -> Compile Child -> Controller Parent -> PreLink Parent -> Controller Child -> PreLink Child -> Post Link Child -> Post Link Parent

Click here for more info. http://excellencenodejsblog.com/
https://www.codeproject.com/