首页 > 代码库 > angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法.
在angular学习笔记(三十)-指令(5)-link文章也提到了link函数的第五个参数linker.
这篇文章就来讲解一下transclude()方法(linker()方法),是怎么使用的,另外,它也是compile函数的第三个参数,用法一样.
下面就通过自己写一个简易的模拟ngRepeat的指令cbRepeat,来了解linker函数是怎么工作的.同时可以增进对指令的理解.
html:
<!DOCTYPE html><html ng-app="dirAppModule"><head> <title>20.8.1 指令-link和compile</title> <meta charset="utf-8"> <script src="../angular.min.js"></script> <script type="text/ng-template" id="text.html"> <div> <h3 ng-transclude></h3> </div> </script> <script src="script.js"></script> <style type="text/css"> h3 { color:#CB2027 } </style></head><body> <div ng-controller="compileCtrl"> <span ng-click="reset()">添加一个元素</span> <span ng-click="resetBunny()">修改一个元素</span> <div cb-repeat="thing in things"> <my-widget><span>{{thing}}</span></my-widget> </div> </div></body></html>
js:
/*20.8.1 指令-compile和link*/var appModule = angular.module(‘dirAppModule‘,[]);appModule.controller(‘compileCtrl‘,function($scope){ $scope.things=[‘bunny‘,‘cat‘,‘dog‘]; $scope.reset=function(){ $scope.things.push(‘pig‘); console.log($scope.things) }; $scope.resetBunny=function(){ $scope.things[0]=‘Bunny‘ }});appModule.directive(‘cbRepeat‘,function(){ return { restrict:‘EAC‘, transclude:‘element‘, compile:function(tEle,tAttrs,trans){ console.log(‘compile-cbRepeat‘); return function(scope,iEle,iAttrs,ctrl,linker){ console.log(‘post-cbRepeat‘); //scope.$new()创建一个作用域的子作用域 //console.log(scope.$new().$parent==scope); var myLoop = iAttrs.cbRepeat, match = myLoop.match(/\s*(.+)\s+in\s+(.*)\s*/), indexString = match[1], collectionString = match[2], parentEle = iEle.parent(), elements = []; scope.$watchCollection(collectionString,function(collection){ if(elements.length>0){ for(var i= 0;i<elements.length;i++){ elements[i].el.remove(); elements[i].scope.$destroy(); } elements = []; } for(var i=0;i<scope[collectionString].length;i++){ var newScope = scope.$new(); newScope[indexString] = scope[collectionString][i]; linker(newScope,function(clone){ parentEle.append(clone); var element = {}; element.el = clone; element.scope = newScope; element.scope.$on(‘$destroy‘,function(){ console.log(‘被移除‘) }); elements.push(element); }) } }) } } }});appModule.directive(‘myWidget‘,function(){ return { restrict:‘E‘, templateUrl:‘text.html‘, replace:true, transclude:true, scope:true, compile:function(tEle,tAttrs,trans){ //compile函数的tEle是原始的templateElement,也就是<div><h3 ng-transclude></h3></div> console.log(‘compile-myWidget‘+tEle.html()); return function(scope,iEle,iAttrs){ //link函数的iEle是tEle经过实例化以后的instanceElement,也就是 //<div><h3 ng-transclude=""><span class="ng-binding ng-scope">{{thing}}</span></h3></div> console.log(‘post-myWidget‘+iEle.html()) } } //简单的说,tElement就是原始的,元素一开始是什么样子,它还是什么样子,所以它没有作用域. //而iElement是经过ng编译的,添加了ng-binding,ng-scope,所以它有作用域. }});
angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。