HTML:
<body ng-controller="Aaa">
<my-tab my-id="div1" my-data="data1"></my-tab>
<my-tab my-id="div2" my-data="data2"></my-tab>
</body>
js:
var m1=angular.module('myApp',[]);
m1.directive('myTab',function(){
return {
restrict:"E",
replace:true,
templateUrl:"temp.html",
scope:{
myId:'@',
myData:'='
},
link:function(scope,ele,attr){
$(ele).delegate('input','click',function(){
$(this).toggleClass('active').siblings().removeClass('active');
$(this).siblings('div').eq($(this).index()).css('display','block').siblings('div').css('display','none');
});
}
};
});
m1.controller('Aaa',['$scope',function($scope){
$scope.data1=[
{title:'111',content:"111111"},
{title:'222',content:"222222"},
{title:'333',content:"333333"}
];
$scope.data2=[
{title:'444',content:"444444"},
{title:'555',content:"555555"}
];
}]);
temp.html:
<div id="{{myId}}">
<input ng-repeat="data in myData" type="button" ng-value="{{data.title}}" ng-class="{active:$first}">
<div ng-repeat="data in myData" ng-style="{display:$first?'block':'none'}">{{data.content}}</div>
</div>