<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js"></script> <script> //m1是一个模块对象，下面有run,directive,controller，filter等 var m1 = angular.module('myApp',[]); m1.directive('myHello',function(){//directive自定义指令，myHello是自定义指令的名字，函数是回调， return { restrict : 'AECM', //指令的类型：E表示标签指令即可以写<my-hello></my-hello>，A表示属性指令即写成<p my-hello></p>，C表示class形式写成<p class="hello"></p>,M表示注释指令写成<!-- directive:hello -->。区分大小写，而且是可以组合使用的。 replace : true, //替换<my-hello></my-hello>,<p my-hello></p>,<p class="hello"></p>,<!-- directive:hello --> template : '<div>hello angular</div>' }; }); </script> </head> <body> <my-hello></my-hello> <p my-hello></p> <p class="hello"></p> // 容易与样式class搞混 <!-- directive:hello --> //容易与注释搞混 </div> </body> </html>
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1 div{ 200px; height:200px; border:1px red solid; display:none;} #div1 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, /*template : '<div id="div1"> <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> </div>'*/ templateUrl : 'temp2.html' }; }); </script> </head> <body> <my-tab></my-tab> <!--<div id="div1"> <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> </div>--> </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>
<!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, //true表示不同的my-tab标签作用域独立。 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>
<!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){ //自定义指令的dom操作 //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>