CODEWITHSUNDEEP
angularjsangularjs-directive
Abhishek Asthana
Abhishek Asthana

Reputation: 226

using link, compile and controller function together in directive

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

Upvotes: 0

Views: 1943

Answers (2)

Sanchi Girotra
Sanchi Girotra

Reputation: 1370

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

  1. Pre link - implement logic to be executed when AngularJS has already compiled the child elements.
  2. 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/

Upvotes: 0

Silvinus
Silvinus

Reputation: 1445

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

Upvotes: 2

Related Questions