色综合图-色综合图片-色综合图片二区150p-色综合图区-玖玖国产精品视频-玖玖香蕉视频

您的位置:首頁技術文章
文章詳情頁

angular.js - angular指令的compile的參數(tElement,tAttrs)和link中的參數(scope,iElement,iAttrs)究竟有什么區別?

瀏覽:167日期:2024-10-14 10:25:26

問題描述

RT:自己編寫angular指令:

compile:function(tElement,tAttrs,linker){ return function(scope,iEle,iAttrs,ctrl,linker){ }}

compile函數有三個參數(tElement,tAttrs,linker),link函數有五個參數(scope,iElement,iAttrs,ctrl,linker)其中的tElement和iElement,tAttrs和iAttrs在什么情況下會不一樣?經過很多種嘗試,指令嵌套指令,都沒有發現他們有區別,但是看書上說是會不一樣的,請問在什么場景下會不一樣,有沒有栗子?

--------------------------分割線--------------------------------------看完這篇文章,文章中的levelOne嵌套levelTwo嵌套levelThree,compile和link的執行順序應該是:compile-levelOne,compile-levelTwo,compile-levelThree,即先把compile全部執行完,然后再執行link函數.但是我自己寫的這兩個指令,它的執行順序卻不是這樣的,它是先執行了外層的compile,外層的link,然后再執行內層的compile,內層的link...希望能得到大師指點,謝謝~~~

<script type='text/ng-template' id='text.html'> <p> <h3 ng-transclude></h3> </p> </script> <p cb-repeat='thing in things'> <my-widget name='code_bunny'><span>{{thing}}</span></my-widget> </p>

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+ins+(.*)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){ console.log(’compile-myWidget’+tEle.html()); return function(scope,iEle,iAttrs){console.log(’post-myWidget’+iEle.html()) }} }});

最后打印出來的順序是這樣的:angular.js - angular指令的compile的參數(tElement,tAttrs)和link中的參數(scope,iElement,iAttrs)究竟有什么區別?

它是先執行了外層cbRepeat的compile,然后執行了cbRepeat的link,然后再是內層myWidget的compile,myWidget的link...暈了~~~ 跪求解答~~~ 謝謝~~~

問題解答

回答1:

關于指令中的compile與link函數的區別建議看這篇文章的介紹http://www.ifeenan.com/angularjs/2014-09-04-[%E8%AF%91]NG%E6%8C%87%E4%BB%A4%E4%B8%AD%E7%9A%84compile%E4%B8%8Elink%E5%87%BD%E6%95%B0%E8%A7%A3%E6%9E%90/

回答2:

我看了那篇文章,也看了你的答案,我覺得是理解上的差異造成的,原文中,是說先按嵌套順序執行 levelOne - levelThree的compile ,再按嵌套順序執行 levelOne - levelThree的pre-link。但樓主你的例子中并沒有link屬性,也沒有pre-link,也沒有post-link,只是簡單的compile。所以輸出你圖示的那個結果。你可以仔細看一下那篇文章中的代碼和你的代碼之間的不同。

主站蜘蛛池模板: 国产精品无码久久av | 在线播放成人高清免费视频 | 国内精品伊人久久 | 一级黄免费 | 日本特黄特色视频 | 国产精品漂亮美女在线观看 | 国产成人18黄网站免费 | 99www综合久久爱com | 深夜国产| 中文字幕精品一区二区精品 | 久久99精品视频 | 国产伦理久久精品久久久久 | 在线亚洲精品中文字幕美乳 | 亚洲一区在线播放 | 欧美一级在线全免费 | 67194欧美成l人在线观看免费 | 午夜性爽快免费视频播放 | 中国一级毛片欧美一级毛片 | 12至16末成年毛片视频 | 欧美大片国产在线永久播放 | 久久精品国产亚洲欧美 | 亚洲成人第一 | 99秒拍福利大尺度视频 | 欧美成人在线视频 | 一个人看的日本www的免费视频 | 97久久天天综合色天天综合色 | 国产区香蕉精品系列在线观看不卡 | 日本免费二区三区久久 | 性盈盈影院影院 | 加勒比毛片 | 在线视免费频观看韩国aaa | 美女把张开腿男生猛戳免费视频 | 久久一本色道综合 | 99精品国产高清一区二区三区香蕉 | 午夜三级网站 | 免费一级成人毛片 | 亚洲国产欧美日韩 | 日本午夜高清视频 | 成年人视频在线免费播放 | 亚洲爽妇网 | 欧美视频在线观看一区二区 |