angular custom directive sequence

[Ian Zhang]

Hi Everyone

I have defined some custom directives.   Is there a definite sequence when they run?   Which one will run first?   Can I define the running sequence?

Thanks,

Ian

[Daniel Tabuenca]

Angular starts at the root node of the application (where ng-app is) and goes down the tree node-by-node. For each node it encounters it tries to determine all the directives that are on that node. If it finds multiple directives on one node it will order them by greatest to least priority (you can define priority on your directive). It then will iterate over the children of the node and repeat the process.

[ianh...@gmail.com]

Thank you for the reply.

For dynamically loaded partial view, from console log, I found the custom directive apply to inner node (div in my case) first, then goes to outer node.   For normal index.html file, it is from outer node to inner node.   I don’t know why.

I have nested div components and with same directive.   I want to apply the directive from outer div node to inner div node. 

Thanks.

Ian

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/jijWCUUQ3wg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

[Daniel Tabuenca]

Well, the compile function gets called from outer to inner, the link function gets called in reverse order. Whether the html is dynamically loaded or not should not affect the outcome. See for example this test:

http://plnkr.co/edit/KaeJv1Em5A6RhnvkowUC?p=preview

It would be best if you could give us a more concrete example of what you are actually trying to accomplish. If you could make a plunker I can help you explain what's going on and what the best way to do what you are trying to do might be.

[Ian Zhang]

Thanks Daniel.

I spent 2 hours today exploring "compile" option.   You are right.   By using compile option on custom directive, the directive runs from outer node to inner node.

But the "compile" function has limitation.   I need scope.$watch in my directive.  The "compile" function cannot access that.

Thanks.

Ian

[Daniel Tabuenca]

You can use a pre-link function instead of the default post-link function like this:

app.directive("log", function() {
  return {
    link: {
      pre: function(scope, element, attrs) {
        console.log("PRE LINKED " + attrs.name);
      },
      post: function(scope, element, attrs) {
        console.log("POST LINKED " + attrs.name);
      }
    }
  };
});

The pre-link function is backward order from post-link function.

[Ian Zhang]

Thank you Daniel.

pre-link function works perfectly.   I really learned a lot from you.   Thanks.

Ian 

--