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-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
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.
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):
ng-show(which hides or shows an existing element based on a condition), or
ng-model(which adds the AngularJS ...