Learning AngularJS

Implementing Nested Directives

The final example illustrates how you can nest directives within each other and have them interact. Nesting directives is a great way to provide a parent context and container for custom elements that are related to each other. In this example the outer directive myPhotos acts as a container that can contain child directives named myPhoto.

Listing 7.5 implements two custom directives: myPhotos and myPhoto. The myPhotos directive is designed to be a container for the myPhoto directive. Notice that lines 7–18 define a controller that provides the functionality for the myPhotos directive, including an addPhoto() function. Because the code uses require:'^myPhotos' in the myPhoto directive, you can also call the addPhoto() ...