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