AngularJS: Up and Running

Chapter 11. Directives

Having explored all the other parts of AngularJS, like controllers, services, and filters, we dive deep into directives in this chapter. Directives are the AngularJS way of dealing with DOM manipulation and rendering reusable UI widgets. They can be used for simple things like reusing HTML snippets, to more complex things like modifying the behavior of existing elements (think ng-show, ng-class, or making elements draggable) or integrating with third-party components like charts and other fancy doodads.

In this chapter, we start with developing a very basic directive, and explore some of the more common options like template, templateUrl, link, and scopes. By the end of the chapter, we will have created multiple versions of our simple reusable widgets, each one building on top of the previous, along the way explaining how each directive definition object changes the functioning of our directive.

What Are Directives?

When we hear the word “directives,” the very first association that should come to our minds is dealing directly with the UI or the HTML that the user sees. Directives are of two major types in AngularJS (though they can be subclassified further and further):

Behavior modifiers

These types of directives work on existing UI and HTML snippets, and just add or modify the existing behavior of what the UI does. Examples of such directives would be ng-show (which hides or shows an existing element based on a condition), or ng-model (which adds the AngularJS ...