Angularjs笔记(五)
自定义指令
<!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> <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> var m1=angular.module("myApp",[]); m1.directive("myTab",function(){ return{ restrict:"AECM",//A--属性，E--元素,C--样式类,M--注释(要大写) replace:true,//覆盖模板
transclude : true,//阻止嵌套元素被template覆盖 //scope:true,//独立作用域 scope:{//隔离作用域，只在当前标签下起作用，外面访问不到 myId:"@myId",//@普通的字符串,也可去掉myId因为他跟键相同 myName:"=",//=是获取controller的数据 myFn:"&"//&父级函数 },//里面的@=&叫做绑定策略，这里是不共享的 controller:["$scope",function($scope){ $scope.name="miaov"; }],//这里的数据是共享的 //template : '<div>hello angular</div>'//要显示的内容 templateUrl:'temp2.html',//模板路径 link:function(scope,element,attr,reController){//link是进行dom操作的,按收四个参数 //scope 作用域，找到上面的name值scope.name miaov //element 最外层的元素 //attr 对应的属性 } } }); 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>
<!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> var m1 = angular.module('myApp',[]); m1.directive('hello',function(){ return { restrict : 'E', replace : true, transclude : true, controller : function($scope){ //$scope.name = 'miaov'; this.name = 'miaov'; this.show = function(){}; }, template : '<div>hello angular<h1 ng-transclude></h1></div>' }; }); m1.directive('hi',function(){ return { restrict : 'E', replace : true, require : '?^hello',//require是在两个元素的数据进行转递,上面的controller里不能是$scope要改成this,要获取hello元素对应的东西就要
//在link里拿到reController
//^这个符号是向上获取?是容错处理，如果没有也不会出现一大堆报错 template : '<span>hi angular</span>', link : function(scope,element,attr,reController){ console.log( reController ); } }; }); m1.controller('Aaa',['$scope',function($scope){ }]); </script> </head> <body ng-controller="Aaa"> <hello> <hi></hi> </hello> </body> </html>
