Home > Developer > Web Develop
I ' ve talked about the timing of directives in AngularJS a few times before. But, it's a rather complicated topic, so I don ' t mind digging a bit deeper. This time, I ' m looking at the timing of Directive controllers vs. directive link functions. As the DOM (Document Object Model) is compiled by AngularJS, the directive controllers and link functions execute at diffe Rent parts of the compile lifecycle.
When AngularJS compiles the DOM, it walks the DOM tree in a depth-first, top-down manner. As it walks down the DOM, it instantiates the directive controllers. Then, when it gets to the bottom of a local DOM tree branch, it starts linking the directives in a bottom-up manner as it Walks back up the branch. This doesn ' t mean, all directive controllers is run before all directive linking; It simply means in a local DOM branch, the directive controllers is instantiated before they is linked.
To see this in action, I ' ve put together a very simple DOM tree in which each element has a unique (but almost identical) directive. As each directive controller and link function is executed, it would log to the console. This is, we can see the timing of the various methods in relation to the DOM tree structure.
<!doctype html>
Before we look at the console output, take note that there is the "mid" branches. This means, AngularJS has both branches to explore before it can fully walk back up to the top DOM node. That's said, when we do run the above code, we get the following console log output:
Outer-controller
Mid-controller
Inner-controller
Inner-link
Mid-link
Second Mid-controller
Second Mid-link
Outer-linkAs can see, as AngularJS walks the DOM tree, it instantiates the directive controllers on the the-the-on-the-the-the-the-down; Then, it links the directives on the the-the-back up.
This was an important difference. While you can only access the DOM tree in the bottom-up linking phase, the directive controller can provide a hooks into th e Top-down lifecycle. This can is critical if you had to handle DOM events based on when elements of the DOM tree came into existence. The linking phase can never give you that because it's executed in reverse.
Directive Controller and Link Timing in AngularJS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
