15

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

Ex

  1. template / templateUrl (is evaluated)
  2. controllerFn
  3. compileFn
  4. linkFn

Answer

From answer below: http://plnkr.co/edit/79iyKSbfxgkzk2Pivuak (plunker shows nested and sibling directives)

  1. Template is parsed
  2. compile() (changes made to the template within compile are proliferated down to linking functions)
  3. controller()
  4. preLink()
  5. postLink()
Community
  • 1
  • 1
Jakob Jingleheimer
  • 30,952
  • 27
  • 76
  • 126
  • 1
    Compile, controller, link. I don't know about templates. See also https://github.com/angular/angular.js/wiki/Understanding-Directives – Mark Rajcok Apr 17 '13 at 23:15
  • @MarkRajcok, thanks! I need to know about all 4 though. – Jakob Jingleheimer Apr 17 '13 at 23:42
  • 1
    @jacob - Here is a [demonstration](http://plnkr.co/edit/qrDMJBlnwdNlfBqEEXL2?p=preview) on the execution order of compileFn, controllerFn, preLinkFn, and postLinkFn. Are you referring to template compilation when you say template evaluation? – tamakisquare Apr 18 '13 at 00:19
  • @tamakisquare, yes I mean template compilation (when the template is available). – Jakob Jingleheimer Apr 18 '13 at 00:26
  • @jacob - Available as in the final rendered view? If so, it doesn't happen until linkFn/postLinkFn is done, because linkFn/postLinkFn is where DOM manipulation and transformation happen. – tamakisquare Apr 18 '13 at 00:39
  • @tamakisquare, *available* as in I can operate on it—when `element.children()[0]` does not return undefined. – Jakob Jingleheimer Apr 18 '13 at 00:52

2 Answers2

9

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

Nikita
  • 6,019
  • 8
  • 45
  • 54
  • Nice, I've forked your plunker to also log the preLink phase. http://plnkr.co/edit/79iyKSbfxgkzk2Pivuak Looks like the preLink phase happens directly after the controller is instantiated – Clement Feb 25 '14 at 23:47
  • perfect - short and sweet example – Jagan Dec 04 '14 at 16:31
4

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().

tamakisquare
  • 16,659
  • 26
  • 88
  • 129
  • So: controller, compile, pre-link, template, post-link ? – Jakob Jingleheimer Apr 18 '13 at 02:49
  • 1
    @jacob - Yes in the sense that `element.children()` are only made available for you to access within postLinkFn. One caveat is that your question is about the order of execution of directive _functions_ and the _template_ you have been referring to is simply not a function. – tamakisquare Apr 18 '13 at 05:36
  • 2
    @jacob, no, compile comes before controller (but I assume you know that, and you probably just typed your comment wrong). I will add that in the compile function you can change the template. However, any changes made there will affect all DOM clones (e.g., for a directive like ng-repeat, making changes to `tElement` in the compile function will affect each cloned instance). So in summary: template DOM (`tElement`) can be changed in compile, and instance DOM (`iElement`) in post-link. – Mark Rajcok Apr 18 '13 at 15:18
  • @tamakisquare: oh well yes, template is not really a function. I couldn't think of another term that covered them all (`template` is a property that gets passed to a function, and `compile`, etc are methods/functions). – Jakob Jingleheimer Apr 18 '13 at 16:45
  • @MarkRajcok, oops, yes ^^, – Jakob Jingleheimer Apr 18 '13 at 16:46
  • 1
    Why was this answer marked correct? This answer addresses the question "which function is safe to operate on the DOM?" but not the question "what is the order of execution for controller, compile, and linking functions?" – gregtzar Sep 20 '13 at 01:58