One of the major reasons for AngularJS' popularity is directives and they are everywhere. We have used them throughout the book without putting much thought into how they actually function and how to create one. Directives, together with data-binding infrastructure, make true view-logic separation possible.
Consuming directives is easy, but creating one is a complex task and requires an understanding of the inner workings of the framework and directives itself. This chapter will give an insight into the world of directives and in the process you will build some useful directives for the Personal Trainer app.
The following topics will be covered in this chapter:
- Understanding directive basics: We learn about what directives are and build a rudimentary directive.
- Understanding the phases of directive execution: We look at the compile and link phases of directive execution and analyze the framework's
ng-clickdirective in this context. - Implementing inter-directive communication: You will build interdependent directives and learn the intricacies of inter-directive communication.
- Working with the $compile and $parser services. You will explore two important services:
$compileand$parser, and learn to utilize them to build directives. - Using templates and transcludes directives: When working with directive templates, transclusion is an important concept to understand and use. We build directives that utilize templates and transclude content.
- Directives and scopes: Explore and learn about the different scope models associated with directives, from the original parent scope and child scope to the isolated scope.
- Building reusable directives with isolated scope. Understanding and using isolated scopes to create reusable directive components, and creating multiple directives with isolated scopes.
- Integrating jQuery and AngularJS: They may seem orthogonal, but they can be made to co-exist. By creating a wrapper directive over a jQuery plugin, we will explore and understand the integration patterns.
Let's get started.
We know what directives are and we have used them all along: ng-click, ng-show, ng-style, and ng-repeat are all directives. These are JavaScript objects defined using the directive function of the Module API. Once constructed, they are either attached to existing HTML elements or extend the existing HTML vocabulary with new elements/tags.
Directives have been conceptualized and incorporated into the framework in such a way that they allow the integration of controllers and views naturally and in a less verbose manner. It's the job of a directive to orchestrate the interaction between the controller and the view, keeping the separation of concerns intact.
From a functional standpoint, there are broadly two families of directives:
- Directives that extend the behavior of existing HTML element, such as
ng-click,ng-show, andng-style. - Component directives come with their own view templates and behavior. The one place that we have used such a directive is with the
$modalservice. The$modalservice used in show history and YouTube video sections internally injects directives:modal-backdropandmodal-windowinto the HTML. These two directives actually provide the dark backdrop and the basic window layout for modal dialog. - There is also a special class of directives that may not come with their own template, but can take any HTML content as a template and add some behavior. The
ng-repeat,ng-if,ng-include, andng-viewdirectives are some of the examples.
In the next section, we will build directives that showcase working of the preceding types. Let's start our discussion with understanding how directives are structured.