問(wèn)題描述

RT:自己編寫(xiě)angular指令:

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

compile函數(shù)有三個(gè)參數(shù)(tElement,tAttrs,linker),link函數(shù)有五個(gè)參數(shù)(scope,iElement,iAttrs,ctrl,linker)其中的tElement和iElement,tAttrs和iAttrs在什么情況下會(huì)不一樣?經(jīng)過(guò)很多種嘗試,指令嵌套指令,都沒(méi)有發(fā)現(xiàn)他們有區(qū)別,但是看書(shū)上說(shuō)是會(huì)不一樣的,請(qǐng)問(wèn)在什么場(chǎng)景下會(huì)不一樣,有沒(méi)有栗子?

--------------------------分割線--------------------------------------看完這篇文章,文章中的levelOne嵌套levelTwo嵌套levelThree,compile和link的執(zhí)行順序應(yīng)該是:compile-levelOne,compile-levelTwo,compile-levelThree,即先把compile全部執(zhí)行完,然后再執(zhí)行l(wèi)ink函數(shù).但是我自己寫(xiě)的這兩個(gè)指令,它的執(zhí)行順序卻不是這樣的,它是先執(zhí)行了外層的compile,外層的link,然后再執(zhí)行內(nèi)層的compile,內(nèi)層的link...希望能得到大師指點(diǎn),謝謝~~~

<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()創(chuàng)建一個(gè)作用域的子作用域//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()) }} }});

最后打印出來(lái)的順序是這樣的:

它是先執(zhí)行了外層cbRepeat的compile,然后執(zhí)行了cbRepeat的link,然后再是內(nèi)層myWidget的compile,myWidget的link...暈了~~~ 跪求解答~~~ 謝謝~~~

問(wèn)題解答

關(guān)于指令中的compile與link函數(shù)的區(qū)別建議看這篇文章的介紹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/

我看了那篇文章，也看了你的答案，我覺(jué)得是理解上的差異造成的，原文中，是說(shuō)先按嵌套順序執(zhí)行 levelOne - levelThree的compile ，再按嵌套順序執(zhí)行 levelOne - levelThree的pre-link。但樓主你的例子中并沒(méi)有l(wèi)ink屬性，也沒(méi)有pre-link，也沒(méi)有post-link，只是簡(jiǎn)單的compile。所以輸出你圖示的那個(gè)結(jié)果。你可以仔細(xì)看一下那篇文章中的代碼和你的代碼之間的不同。