Learning AngularJS

Manipulating the DOM in Custom Directives

One of the most common tasks you will be performing in custom directives is manipulating the DOM. This should be the only place in your AngularJS apps that you actually do manipulate the DOM. In this exercise we build a basic custom directive that applies a box with title and footer around the elements that are contained within. This example is very basic and gives you a chance to see how to use some of the mechanisms in AngularJS, such as setting values as attributes to the custom directive.

The code in Listing 7.1 creates a simple application with a controller that contains only the scope variable title. The code then defines a directive that enables transclusion, restricts the custom directive to element ...