Defining the Tabs Template

Next, you need to define a template to act as the container for the pane elements to support multiple panes in the tabbed view. The tabs container needs to support defining multiple pane elements. Listing 29.5 shows the tabs template code.

You assign a tabs class to an element for styling. To implement multiple panes, you define a <span> element that implements the ng-repeat directive on a panes array defined in the custom directive code. Notice that the ng-click directive calls select(pane) to select the pane and make it visible.

Also, you use the ng-class directive to add the activeTab class if pane.selected is true. Line 8 defines the <div> element, where the pane content is transcluded.

Listing 29.5 rich_tabs.html: Implementing the tabs template view for the tabbed view

Click here to view code image

01 <div class="tabbable">
02   <div class="tabs">
03     <span class="tab" ng-repeat="pane in panes"
04         ng-class="{activeTab:pane.selected}"
05         ng-click="select(pane)">{{pane.title}}
06     </span>
07   </div>
08   <div class="tabcontent" ng-transclude></div>
09 </div>