Building a Tabbed View

In this example you will build two custom AngularJS directives, one that acts as a tab group and the other that acts as the individual panes in the tabbed group. The objective of this example is to give you a look at nesting custom directives inside each other, as well as some communication between the two.

The folder structure for this example is as follows:

./server.js: Node.js web server that serves the static project files.

./images: Folder that contains the images used in the examples.

./ch11: Project folder.

./ch11/tabbable.html: AngularJS template for the project.

./ch11/tabs.html: AngularJS partial template for the tabbed group.

./ch11/panel.html: AngularJS partial template for each individual panel ...

Get Learning AngularJS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.