AngularJS: Up and Running

Chapter 13. Advanced Directives

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 template and templateUrl, scope, restrict, and 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 transclude, compile, controller, and 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.

Life Cycles in AngularJS

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.

AngularJS Life Cycle

When an AngularJS application is loaded in our browser window, the following events are executed in order:

1. The HTML page is loaded:

   1. The HTML ...