using link, compile and controller function together in directive

Question

I am new to angular, I am still trying to learn a lot, there is one thing I came across,need to know if I can use link, controller, compile all together inside one single directive ?

For example , this is an example which I am working in some directive, while watching output, I came across that this link function doesn't work. Any reason for it not to work, or I have done an obvious mistake.

CODE

angular.module('app').directive('movies', function() {
  return {
    templateUrl: "movieCard.html",
    restrict: "EA",
    scope: { },
    link: function(scope, element, attrs) {
      console.log("link function called");
    },
    controller: function($scope) {
      console.log("controller function called");
    },
    compile: function(elem,attrss){
      console.log("compile function called");
    }
  }

})

I have created the Plunker

score 2 · Accepted Answer · edited May 23 '17 at 12:22

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

ok got the point, but still need to know why dont we pass scope in the compile function as the parameter , and if pre and post are the parts of the compile function how come we are able to pass scope directly to pre and post.I am but confused now. — Abhishek Asthana, Jun 07 '16 at 07:06
I wrote simply my pre and post link function, but angular passed to post and pre function multiple parameters like scope. I edit plunker with parameters — Silvinus, Jun 07 '16 at 07:16

score 0 · Answer 2 · answered Nov 21 '17 at 12:08

Once the DOM is ready, angular js processes the dom and iterate through the elements and call associated Compile Function (which implement template level changes) and one's the instances of elements are created then link function (default post link) is called

Pre link - implement logic to be executed when AngularJS has already compiled the child elements.
Post link - it is called in reverse order to make sure all child's are iterated before parent.

Thus in case of ng-repeat, if we want to make changes to all elements then we should add that code in compile function else if instance level than in link function i.e. there can be multiple element instances but there is only one template element.

Refer http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives/

using link, compile and controller function together in directive

2 Answers2