How compile, controller, pre-linking and post linking works in Angularjs?

0 votes
Want to know how the compile and link process work in an angularjs with example syntax.
Jan 31 in Angular by kartik
• 10,700 points
58 views

1 answer to this question.

0 votes

Explanation of compile and link process don't come with an example.Let's look at directive named sample which appears in the following markup.

<div ng-repeat="i in [0,1,2]">
    <simple>
        <div>Inner content</div>
    </simple>
</div>

 The directive appears once inside an ng-repeat and will need to render three times.

Now,what we want to focus on is how and when the various directive functions execute, as well as the arguments to the compile and linking functions.

To see what happens we’ll use the following shell of a directive definition.

app.directive("simple", function(){

   return {

     restrict: "EA",

     transclude:true,

     template:"<div>{{label}}<div ng-transclude></div></div>",
      compile: function(element, attributes){
        return {
                pre: function(scope, element, attributes, controller, transcludeFn){
               },
                post: function(scope, element, attributes, controller, transcludeFn){
                }            }      },
      controller: function($scope){
       }
     };
});

Compile Executes Once

The first function to execute in the simple directive during view rendering will be the compile function. 

The compile function will receive the simple element as a jqLite reference, and the element contents will

 look like the content in the picture,

This compile function in the sample above returns an object with the pre and post linking functions.

 However, many times we don’t need to hook into the compilation phase, so we can have a link function instead of a compile function.

app.directive("simple", function(){

    return {

       //...

        link: function(scope, element, attributes){


        },

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

    };

});

A link function will behave like the post-link function described below.

Loop Three Times

Since the ngRepeat requires three copies of simple, we will now execute the following functions once for each instance.

Controller Function Executes

The first function to execute for each instance is the controller function.

It is here where the code can initialize a scope object as any good controller function will do.

Note the controller can also take an $element argument and receive a reference to the simple element clone that will appear in the DOM.

Pre-link Executes

By the time we reach the pre-link function (the function attached to the pre property of the object returned from compile),

we’ll have both a scope initialized by the controller function, and a reference to a real element that will appear in the DOM.

Post-link Executes

Post link is the last function to execute. Now the transclusion is complete, the template is linked to a scope, and the view

will update with data bound values after the next digest cycle .

In post-link it is safe to manipulate the DOM, attach event handlers, inspect child elements, and 

setup observations on attributes and watches on the scope.

To Sum Up: First Complie then controls move to controller,after that pre-linking 

and then finally post-linking process takes place in Angularjs

answered Jan 31 by Niroj
• 21,560 points

Related Questions In Angular

0 votes
1 answer

How can we achieve transclusion using link function and directive controller?

Hey, The Term Transclusion means unhidding the context ...READ MORE

answered Feb 5 in Angular by Niroj
• 21,560 points
46 views
0 votes
1 answer
0 votes
1 answer
0 votes
1 answer
+1 vote
1 answer

What is the relationship between angularjs Scope with controller/view?

Let us consider the below block: <div ng-controller="emp"> ...READ MORE

answered Jan 20 in Web Development by Niroj
• 21,560 points

edited Jan 21 by Niroj 67 views
+1 vote
1 answer

What is css box module?

Hey, All the element present in html follows ...READ MORE

answered Jan 20 in Web Development by Niroj
• 21,560 points

edited Jan 21 by Niroj 53 views
0 votes
1 answer

Explain the difference between visibility:hidden; and display:none?

hii, visibility:hidden; and display:none are totally different used ...READ MORE

answered Jan 20 in Web Development by Niroj
• 21,560 points
347 views
+1 vote
1 answer

How to access the Angularjs scope of a particular html element from our console?

Hello, You should follow the below steps:-- 1.Compile and ...READ MORE

answered Jan 21 in Web Development by Niroj
• 21,560 points

edited Jan 21 by Niroj 52 views
0 votes
1 answer

What is $watch() and it's use in AngularJS?

$watch() function is used to watch the ...READ MORE

answered Feb 3 in Angular by anonymous
• 21,560 points
74 views
0 votes
1 answer

How can we achieve transclusion in AngularJs?

Hii,  In order to know what transclusion is ...READ MORE

answered Feb 5 in Angular by Niroj
• 21,560 points
37 views