自己定义一个tab指令

定义一个tab切换的指令：

指令的文件结构：

Js/directives/tab

tab.html

tab.js

tab.html：
<style>
    .my-li-style{
        line-height: 30px;
        margin-right: 10px;
        border-radius: 3px;
        height:30px;
        cursor: pointer;
    }
    .tabactive{
        color: #fff;
        background:#f48a36;
    }
</style>
<div class="amdin-nav">
    <ul class="list-inline adminAction-listHeader">
        <li class="my-li-style" ng-repeat="tab in tab_list"
　　　　　　　ng-click="tab_click(tab.state)"
            ng-class={tabactive:current_state==tab.state}
            ui-sref="{{tab.state}}">{{tab.name}}</li>
    </ul>
</div>

Tab.js:
define(["app"],function(myapp){
    myapp.directive('mytab',["$state",function($state){
        return {
            scope:{
                data:"="
            },
            templateUrl:'js/directives/tab/tab.html',
            link:function(s,ele,attrs){
                s.current_state=$state.current.name;//初始化（获得当前的路由状态）
                s.tab_click=function(cstate){//每次触发此事件，就传递过来状态值
                    s.current_state=cstate;
                }
              　s.$watch("data",function(n_data){//监听值的改变
                s.tab_list=n_data;
              })
            }
        };
    }]);
});

控制器：
//创意界面的权限控制器
define(["app",'services/zct_get_my_right','directives/tab/tab'], function (myapp) {
    myapp.controller('ideas_first_ctrl',
        ['$scope','$rootScope','$state','get_my_right', function (s,rs,$state,getRight) {
　　　　　　　var my_right=getRight.get_right(localStorage.permission);
            s.idea_tab=[
                {name:"全部创意",state:"home.ideas.allIdeas"},
                {name:"我的创意",state:"home.ideas.myIdeas"},
            ];
        }])
});

Html:
<div class="ideas-list">
    <div class="my-row">
 
     	<mytab  data="idea_tab"></mytab>
 
        <div class=" list-content"  ui-view="part" ></div>
    </div>
</div>