Order of execution of directive functions in AngularJS

Question

What is the order of execution of directive functions? The documentation doesn\'t seem to address this.

Ex

1. template / templateUrl (is evaluated)

Answer 1

Pre-linking function: Executed before the child elements are linked. Not safe to do DOM transformation since the compiler linking function will fail to locate the correct elements for linking.

Post-linking function: Executed after the child elements are linked. It is safe to do DOM transformation in the post-linking function.

Above excerpt is taken from the official docs on directives.

So, to answer your question, Post-linking/Link function is when/where you can safely operate on element.children().

Answer 2

on related note, here my understanding of exec order across the DOM.

Here is a demo (open browser JS console)

Given this DOM using directive foo:

  <div id="1" foo>
    one
    <div id="1_1" foo>one.one</div>
  </div>

  <div id="2" foo>two</div>

...AngularJS will traverse the DOM - twice - in depth-first order:

1st pass foo.compile()

1) compile: 1

2) compile: 1_1

3) compile: 2

2nd pass: foo.controller() traversing down; foo.link() while backtracking

controller: 1

controller: 1_1

link: 1_1

link: 1

controller: 2

link: 2