Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Compile Pre and Post Link

    John LindquistJohn Lindquist

    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.

    angularjsAngularJS
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss