Compile Pre and Post Link
The typical function you use when creating a directive is the post link function with the signature function (scope, element, attributes) {}. You can also make use of the pre link function for finer grained control of the initialization of your directive.
John Lindquist: The only way to explain the order of compile, controller, pre link, and post link is by doing it in context of parent and child relationships within the elements. You can see we have a parent, a child 1, a child 1A and B, and so on and so forth, here.
If you look at the output, you can see that it goes through and it compiles everything first so that it can grab all of the directives, and it knows what that final template with the expressions evaluated and everything looks like before the controllers, linking, scopes, and everything comes into play.
At this point, with the controller, then we start getting into where the scope is ready. With the controllers, they need to fire first, before any of the linking functions can happen, because in the linking functions, you can inject controllers from parent directives.
Within those controllers, you can communicate between child and parent directives, so the controllers need to be ready before the linking functions.
The pre link and the post link, you can see it's a bit weird here how it goes pre link parent, pre link child 1, and pre link child 1A. Whereas the post link, if you look at it down here, you have post link child 2B, post link child 2, parent is the post link.
They go in opposite order. Whereas the pre link starts from parent and goes down to children, and then the post link starts with the children and goes back up to parent.
What that means is when it talks about, in the docs, that the pre linking function executes before the child elements are linked, that means that these are fired off before the children have a chance to know about each other and about the parents.
The post link does it in the reverse order. When this final post link is fired, which is the link function you usually use, everything is set up and ready to go.
That's why, when you think about it, the post link or the link function that is mainly used is where everything is set up, everything is prepared, and everything is linked together. This is the one that's used the grand majority of the time.
After that, controllers are used quite often. Compile is used as far as manipulating the element and the attributes before it gets to where the scope is available.
This pre linking function is hardly ever used. It's just a random scenario. You can see it in like ngInit, if you look at the source code, where you do need to have something set up before the child elements are linked together.
Hi, John I found this example very illuminating, however I want to go one step further. I modified it a bit to see what happens when you have two directives in the same element (with different priorities). Check it out here http://jsfiddle.net/gkbonetti/tY72y/3. Something weird happened (in my opinion). The parent post-link is not waiting for all its children anymore. It happens straight after the directive with higher priority.