Angularjs Tab切换功能

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:
          '
' +
            '
' +
              '
' +
            '
' +
            '
' +
              '' +
              '
' +
          '
'
      };
    })
    .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:
          '
' +
            '{{ title }}' +
          '
'
      };
    });
})