Learning AngularJS

Implementing Expandable and Collapsible Elements

In this example you will use custom AngularJS directives to build elements on the web page that can expand and contract. Each element will have a title and an expand/collapse button on top. When the collapse button is clicked, the contents of the element will be hidden. When the expand button is clicked, the contents will be shown again.

The purpose of this exercise is to solidify implementing custom AngularJS directives that nest inside each other and communicate with each other. In this example you also get to see how a scope gets isolated from the controller but shared between the expand container and the items in the container.

The folder structure for this example is as follows:

■ ./server.js ...