CODEWITHSUNDEEP
angularjsangularjs-directive
temporary_user_name
temporary_user_name

Reputation: 37098

What is the difference between using the link attribute vs using compile with pre-link and post-link?

This question is pretty informative about pre-link and post-link using the compile attribute in a directive definition. However, it doesn't say anything about what it means to just straight up use the link attribute. I'm talking about the difference between these two things:

A:

myApp.directive('log', function() {
    return {
      link: function(...){...},
      // other stuff here
    };
});

B. 

myApp.directive('log', function() {  
    return {  
      compile: function(...){
          return {
            pre: function preLink( scope, element, attributes ) {
               // stuff
            },
            post: function postLink( scope, element, attributes ) {
                // stuff
            }
          }
      },  
      // other stuff here  
    };  
});

What is a link function? Is it supposed to combine pre and post? I do not understand how to use these two patterns differently.

Upvotes: 0

Views: 69

Answers (1)

New Dev
New Dev

Reputation: 49590

There is no functional difference - just API "sugar":

link: function postlink(){...}

is an API shortcut for:

link: {
  post: function postlink(){...}
}

which, in its full form is:

link: {
  pre: function prelink(){...},
  post: function postlink(){...}
}

which, on its own, is a shortcut of

compile: function(){
  return {
     pre: function prelink(){...},
     post: function postlink(){...}
  };
}

which, could be slightly simplified to:

compile: function(){
  return function postlink(){...}
}

When compile property is specified, link property is ignored.

Here's Angular's documentation on the subject

Upvotes: 3

Related Questions