定义一个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>