<!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{ 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>