Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training,
learning paths, books, tutorials, and more.

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training,
learning paths, books, interactive tutorials, and more.