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, 2020 in Angular by kartik
• 37,520 points
1,472 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

Hope this helps!

To know more about Angular, It's recommended to join Angular JS course today.

Thanks.

answered Jan 31, 2020 by Niroj
• 82,880 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, 2020 in Angular by Niroj
• 82,880 points
1,082 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, 2020 in Web Development by Niroj
• 82,880 points

edited Jan 21, 2020 by Niroj 1,099 views
+1 vote
1 answer

What is css box module?

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

answered Jan 20, 2020 in Web Development by Niroj
• 82,880 points

edited Jan 21, 2020 by Niroj 1,178 views
0 votes
3 answers

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

display:none means that the tag in question will ...READ MORE

answered Dec 14, 2020 in Web Development by Gitika
• 65,890 points
119,600 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, 2020 in Web Development by Niroj
• 82,880 points

edited Jan 21, 2020 by Niroj 2,906 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, 2020 in Angular by anonymous
• 82,880 points
2,443 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, 2020 in Angular by Niroj
• 82,880 points
661 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP