Angularjs Tab切換功能

define([],function(){
    app.directive('tabgroup', function () {
      return {
        restrict: 'E',
        replace: true,
        transclude: true,
        controller: function($scope) {
          $scope.templateUrl = '';
          var tabs = $scope.tabs = [];
          var controller = this;
     
          this.selectTab = function (tab) {
            angular.forEach(tabs, function (tab) {
              tab.selected = false;
            });
            tab.selected = true;
          };
     
          this.setTabTemplate = function (templateUrl) {
            $scope.templateUrl = templateUrl;
          }
     
          this.addTab = function (tab) {
            if (tabs.length == 0) {
              controller.selectTab(tab);
            }
            tabs.push(tab);
          };
        },
        template:
          '<div class="ui-tab-classic">' +
            '<div class="ui-tab-hd">' +
              '<ul class="ui-tab-panel" ng-transclude></ul>' +
            '</div>' +
            '<div class="ui-tab-bd"><div class="ui-tab-content">' +
              '<ng-include src="templateUrl">' +
              '</ng-include></div></div>' +
          '</div>'
      };
    })
    .directive('tab', function () {
      return {
        restrict: 'E',
        replace: true,
        require: '^tabgroup',
        scope: {
          title: '@',
          templateUrl: '@'
        },
        link: function(scope, element, attrs, tabgroupController) {
          tabgroupController.addTab(scope);
     
          scope.select = function () {
            tabgroupController.selectTab(scope);
          }
     
          scope.$watch('selected', function () {
            if (scope.selected) {
              tabgroupController.setTabTemplate(scope.templateUrl);
            }
          });
        },
        template:
          '<li ng-class="{\'z-current\': selected}" ng-click="select()">' +
            '<a href="" >{{ title }}</a>' +
          '</li>'
      };
    });
})