【AngularJS】タブでコンテンツ切り替えするやつ

tab.html

<div class="tab-pane" ng-show="active" ng-transclude>
</div>

tabs.coffee

app = angular.module 'MyApplication'

app.directive 'tabSet', ->
  restrict: 'E'
  replace: true
  templateUrl: 'templates/tabset.html'
  transclude: true
  scope: {}
  controller: ($scope, TimetablesService) ->
    tabs = $scope.tabs = []

    @addTab = (tab) ->
      tabs.push tab
      tab.active = (tabs.length == 0)

    $scope.select = (tab) ->
      angular.forEach tabs, (tab) -> tab.active = false
      tab.active = true

    return
  link: (scope, element, attrs, ctrl) ->


app.directive 'tabPane', ->
  require: '^tabSet'
  restrict: 'E'
  replace: true
  templateUrl: 'templates/tab.html'
  transclude: true
  scope:
    heading: '@'
  link: (scope, element, attrs, ctrl) ->
    ctrl.addTab(scope)

tabset.html

<div>
  <ul>
    <li ng-repeat="tab in tabs" ng-class="{active: tab.active}">
      <a ng-click="select(tab)">{{tab.heading}}</a>
    </li>
  </ul>
  <div ng-transclude>
  </div>
</div>

test.html

<tab-set>
  <tab-pane heading="tab1">
    タブ1のコンテンツ
  </tab-pane>
  <tab-pane heading="tab2">
    タブ2のコンテンツ
  </tab-pane>
  <tab-pane heading="tab3">
    タブ3のコンテンツ
  </tab-pane>
</tab-set>