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+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){
console.log('compile-myWidget'+tEle.html());
return function(scope,iEle,iAttrs){
console.log('post-myWidget'+iEle.html())
}
}
}
});
最後印出來的順序是這樣的:
它是先執行了外層cbRepeat的compile,然後執行了cbRepeat的link,然後再是內層myWidget的compile,myWidget的link...
暈了~~~ 跪求解答~~~ 謝謝~~~
關於指令中的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 /
我看了那篇文章，也看了你的答案，我覺得是理解上的差異造成的，原文中，是說先按嵌套順序執行levelOne - levelThree的compile ，再按嵌套順序執行levelOne - levelThree的pre-link。但樓主你的例子中並沒有link屬性，也沒有pre-link，也沒有post-link，只是簡單的compile。所以輸出你圖示的那個結果。你可以仔細看那篇文章中的程式碼和你的程式碼之間的差異。