<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 div,#div2 div{ width:200px; height:200px; border:1px red solid; display:none;}
#div1 input.active , #div2 input.active{ background:red;}
</style>
<script src="jquery-1.11.1.js"></script>
<script src="angular.min.js"></script>
<script> var m1 = angular.module('myApp',[]);
m1.directive('myTab',function(){
return {
restrict : 'E',
replace : true,
scope : {
myId : '@',
myData : '='
},
controller : ['$scope',function($scope){
$scope.name = 'miaov';
}],
templateUrl : 'temp3.html',
link : function(scope,element,attr){
//console.log(scope.name);
//console.log(element);
//console.log(attr.myId);
element.delegate('input','click',function(){
$(this).attr('class','active').siblings('input').attr('class','');
$(this).siblings('div').eq( $(this).index() ).css('display','block').siblings('div').css('display','none');
});
}
};
}); m1.controller('Aaa',['$scope',function($scope){ $scope.data1 = [
{title:'数学',content:'111111111'},
{title:'语文',content:'222222222'},
{title:'英语',content:'333333333'}
];
$scope.data2 = [
{title:'物理',content:'444444444'},
{title:'化学',content:'555555555'}
]; }]); </script>
</head> <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>
</html>
temp3.html
<div id="{{myId}}">
<!--<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display:block">11111111</div>
<div>22222222</div>
<div>33333333</div>-->
<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>