Hi,
A few days ago I stumbled upon the following to articles:
- The nitty-gritty of compile and link functions inside AngularJS directives
- The nitty-gritty of compile and link functions inside AngularJS directives part 2: transclusion
I think they are great and recommend that before you continue reading here you go and read them.
The reason I am writing this is because I think that although they are great they have a methodological problem that might leave with some wrong ideas on how things work.
The problem is that the example that Jurgen Van de Moere chose to use.
The DOM structure he used has a root node, a child node and a grandchild node.
This leads to some sort of a "serial" thinking about what is happening at the "nitty-gritty" level.
It is why he end up with statements like:
"After AngularJS travels down the DOM and has run all the compile functions, it traverses back up again and runs all associated post-link functions.
The DOM is now traversed in the opposite direction and thus the post-link functions are called in reverse order. So while the reversed order looked strange a few minutes ago, it is now starting to make perfect sense."and
"A pre-link function of an element is guaranteed to run before any pre-link or post-link function of any of its child elements."
Now lets choose to use a slightly different DOM that looks more like a real tree.
Say one that has a root with 2 children that each has 2 children of their own as in the following Plunker (derived from the original by Jurgen Van de Moere).
You will then see that the order of execution of the compile, pre-link and pos-link functions would be much better described like this:
Do a pre-order scan of the DOM tree, and run compile on each node you reach . Then, starting from the root, recursively scan the DOM tree where on each node you run pre-link, then recursively process the child nodes and then run post link.
If you open the debugger on the above plunker, It will look like this:
2015-09-07 17:46:01.357 app.js:8 root: compile
2015-09-07 17:46:01.364 app.js:8 child1: compile
2015-09-07 17:46:01.364 app.js:8 grandchild1: compile
2015-09-07 17:46:01.365 app.js:8 grandchild2: compile
2015-09-07 17:46:01.365 app.js:8 child2: compile
2015-09-07 17:46:01.366 app.js:8 grandchild3: compile
2015-09-07 17:46:01.367 app.js:8 grandchild4: compile
2015-09-07 17:46:01.367 app.js:11 root: pre link
2015-09-07 17:46:01.368 app.js:11 child1: pre link
2015-09-07 17:46:01.368 app.js:11 grandchild1: pre link
2015-09-07 17:46:01.369 app.js:14 grandchild1: post link
2015-09-07 17:46:01.369 app.js:11 grandchild2: pre link
2015-09-07 17:46:01.370 app.js:14 grandchild2: post link
2015-09-07 17:46:01.370 app.js:14 child1: post link
2015-09-07 17:46:01.370 app.js:11 child2: pre link
2015-09-07 17:46:01.371 app.js:11 grandchild3: pre link
2015-09-07 17:46:01.371 app.js:14 grandchild3: post link
2015-09-07 17:46:01.372 app.js:11 grandchild4: pre link
2015-09-07 17:46:01.372 app.js:14 grandchild4: post link
2015-09-07 17:46:01.373 app.js:14 child2: post link
2015-09-07 17:46:01.373 app.js:14 root: post link
So to summarize what we have seen so far -
1. Compile parent before all children and before any linking.
2. Prelink any node before prelinking or postlinking any of its child nodes.
3. Postlink any node After prelinking AND POSTLINKING all its child nodes.
Note: Looking at the entire tree some nodes can be post-linked before some others get pre-linked.
but WAIT this does not end here,
because directives that use transclude:true must get their content as a compiled DOM on their own COMPILE we get the following:
Have a look at this plunker in which I changed the root and child 2 to be directives that use transclude
and we now get the following order:
2015-09-07 18:20:04.917 app.js:8 child1: compile
2015-09-07 18:20:04.917 app.js:8 grandchild1: compile
2015-09-07 18:20:04.918 app.js:8 grandchild2: compile
2015-09-07 18:20:04.919 app.js:8 grandchild3: compile
2015-09-07 18:20:04.919 app.js:8 grandchild4: compile
2015-09-07 18:20:04.920 app.js:29 Transcludingchild2: compile
2015-09-07 18:20:04.921 app.js:29 Transcludingroot: compile
2015-09-07 18:20:04.922 app.js:32 Transcludingroot: pre link
2015-09-07 18:20:04.923 app.js:11 child1: pre link
2015-09-07 18:20:04.923 app.js:11 grandchild1: pre link
2015-09-07 18:20:04.924 app.js:14 grandchild1: post link
2015-09-07 18:20:04.924 app.js:11 grandchild2: pre link
2015-09-07 18:20:04.925 app.js:14 grandchild2: post link
2015-09-07 18:20:04.925 app.js:14 child1: post link
2015-09-07 18:20:04.926 app.js:32 Transcludingchild2: pre link
2015-09-07 18:20:04.927 app.js:11 grandchild3: pre link
2015-09-07 18:20:04.927 app.js:14 grandchild3: post link
2015-09-07 18:20:04.928 app.js:11 grandchild4: pre link
2015-09-07 18:20:04.929 app.js:14 grandchild4: post link
2015-09-07 18:20:04.929 app.js:35 Transcludingchild2: post link
2015-09-07 18:20:04.930 app.js:35 Transcludingroot: post link
What do we see?
The root can not compile before its children so child1 and grandchild1 & grandchild2 get compiled, then it should be child2's turn but since he is transcluding now he can not be complied before grandchild3 and grandchild4 (maybe they should have been called grandchild21 and grandchild22...) and only when they are complied can child2 and then the root be finally complied.
In a sense we could think of pre-compile and and post-compile that are called on a node before it children are compiled and after it where the pre-complie is called on non transcluding directives and the pos-compile is called on the ones that ARE using transclusion.
that said we can see that the order of linking remains unaffected by the added transclusion.
Write and tell me what you think.
