We covered creating simple, reusable components in Chapter 11, and saw how to unit test them in Chapter 12. We dug into some common options, like
replace, and saw how to pass data to our directive to make it fully self-contained. These cover 70–80% of the general use cases. The topics we cover in this chapter address the other 20%, which deal with getting a deeper understanding of the AngularJS life cycle.
In this chapter, we first review the AngularJS life cycle in detail. We then go over the remaining options of the directive definition object, including
require, as well as when to use them. With all that covered, we dig into the common use case of extending
ng-model with either creating new input directives or creating our own custom validators. Finally, we see how we can integrate with third-pary UI components like graphs and charts.
Before we jump into any of the advanced directive definition options, it helps to get a better understanding of how AngularJS goes about instantiating a directive and using the directive definition object. And any talk about the directive life cycle is not complete without understanding how AngularJS accomplishes much of its magic underneath the covers.
When an AngularJS application is loaded in our browser window, the following events are executed in order:
The HTML page is loaded: