Differencebetween Compile and Link Function in Angularjs

when to use link function and compile function in angularjs?

The link function is used in a directive.

The params of the link function reference the element the directive is attached to.

link: function(scope, element, attr)

Element here is the HTML element. and attr refers to the attributes of the HTML element

So you could do element.text('fred');

To set the text of the element to 'fred' and so on.

$compile I am not so familiar

AngularJS Directives: Are Link and Compile functions meant to work together?

link and compile do not work together, no.

In the directive definition object, if you only define link, that's like shorthand for having an empty compile function with an empty preLink function with your code in the postLink function. As soon as you define compile, link is ignored by angular, because compile should return the linking functions.

If you only return one function from compile, then it'll be executed post link.

Or, put differently, link is just a shortcut to the postLink function that gets called after the scope has been linked by compile.

It's (sort of) documented here - look at the comments in the code sample.

AngularJS : ng-repeat's compile and link functions

One thing that can be confusing about their description is they're trying to discuss the idea of a directive within an <ng-repeat> as opposed to discussing <ng-repeat> itself.

The idea is that even if you have multiple instantiations of a particular directive (for instance because they are within an <ng-repeat>) the compile function is executed once and only once for the lifetime of your app. Thus, the performance benefit of putting code in here is that it only gets run only once. And that's also the potential problem. The only things that should go in a compile function are things that are common to all the instantiations of that directive.

The link function, on the other hand, is executed once for each instantiation of that directive (again, for example, within an <ng-repeat>).

So you can think of the compile function as setting up the template of what a directive of this type should be, while the link function sets up an actual instance of that directive. This is why the link function gets a $scope passed in to it and the compile doesn't and why the link function is the much more commonly used one.

For a great discussion of exactly this by one of the authors of Angular, check out: http://www.youtube.com/watch?v=WqmeI5fZcho&list=TLwY_LmqLDXW_3QKhTNm1zKa9j40TvPO2O (13:42 is where Misko address link vs compile functions)

using link, compile and controller function together in directive

Link function is a part of compile function. If you defined compile, you override the compile function, pre link function and post link function.
Your can write your compile function like this :

compile: function(elem,attrss){
  console.log("compile function called");
  return {
      pre: function() { console.log("pre link function called"); },
      post: function() { console.log("post link function called, it's the same of link function"); }
  }
}

So it useless to defined link in directive if you override compile function. And link doesn't will be called.
I create a little plunker to illustrate it https://plnkr.co/edit/hbel2uGzbyp0VHfQS4pN?p=preview.

Angular call function in this order :

• Create the scope for the directive (depends on config)
• Parse DOM from top to bottom (foreach node in DOM)
  
  
  • call compile function
  • call controller function
  • call pre link function
• Parse DOM from bottom to top
  
  
  • call post link function

I recommend to you to read this post Angular directives - when and how to use compile, controller, pre-link and post-link

---

Related Topics