Angularjs中页面的切换通过Router路由也就是锚点，而大部分的tab选项卡插件切换效果也是利用锚点，这与angualrjs中的router有冲突，为了更好地在angularjs应用实现tab选项卡功能，我们利用angularjs全局作用域$rootScope、ng-class、ng-click和ng-if实现这个效果，这里使用的是mdui。

1. HTML页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--省略-->
<body ng-app='routingDemoApp'>
  <div class='container'>
    <div class="mdui-row">
          <div class="mdui-tab" mdui-tab>
              <a ng-class="{'active':data.current==1}" ng-click="actions.setCurrent(1, $event)" class="mdui-ripple mdui-tab-active">tab标签一</a>
              <a ng-class="{'active':data.current==2}" ng-click="actions.setCurrent(2, $event)" class="mdui-ripple">tab标签二</a>
          </div>
          <div ng-if="data.current==1" class="mdui-p-a-2">
              <p>标签一内容</p>
          </div>
  
          <div ng-if="data.current==2" class="mdui-p-a-2">
              <p>标签二内容</p>
          </div>
    	</div>
  </div>
</body>
<!--省略-->

2. 定义控制器

1
2
3
4
5
6
7
8
9
10
11
12
DoubanApp.controller('IndexController', ['$scope', '$http', '$rootScope', function ($scope, $http, $rootScope) {
    //选项卡的切换
    $rootScope.data = {
        current:"1"
    };
    $rootScope.actions = {
        setCurrent:function(param, $event){
            $($event.target).addClass('mdui-tab-active').siblings().removeClass('mdui-tab-active');
            $rootScope.data.current = param;
        }
    };
}]);

通过在全局作用内声明标识变量和标识变量更改函数，在函数里面修改标识变量和对应的class，给tab标签绑定ng-click和ng-class事件，用于传入对应的参数更改全局变量和改变对应的class样式，给相应的内容区块绑定ng-if，用过判断全局标识来显示或隐藏。