<!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="angular.min.js"></script> <script> var m1 = angular.module('myApp',[]); m1.directive('myTab',function(){ return { restrict : 'E', replace : true, //scope : true, scope : { myId : '@', myName : '=', myFn : '&' }, controller : ['$scope',function($scope){ $scope.name = 'miaov'; }], templateUrl : 'temp2.html' }; }); m1.controller('Aaa',['$scope',function($scope){ $scope.name = 'hello'; $scope.show = function(n){ alert(n); }; }]); </script> </head> <body ng-controller="Aaa"> <my-tab my-id="div1" my-name="name" my-fn="show(num)"></my-tab> <my-tab my-id="div2" my-name="name" my-fn="show(num)"></my-tab> </body> </html>
temp2.html
<div id="{{myId}}">
<input class="active" type="button" value="1" ng-click="myFn({num:456})">
<input type="button" value="2">
<input type="button" value="3">
<div style="display:block">{{name}}</div>
<div>22222222</div>
<div>33333333</div>
</div>