angular.js - angular指令的compile的参数(tElement,tAttrs)和link中的参数(scope,iElement,iAttrs)究竟有什么区别?

Question

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...
晕了~~~ 跪求解答~~~ 谢谢~~~

Answer 1

For the difference between compile and link functions in instructions, it is recommended to read the introduction of this article
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 /

Answer 2

I read that article and your answer. I think it is caused by the difference in understanding. In the original article, it is said that the compile of levelOne - levelThree is first executed in the nesting order, and then levelOne - is executed in the nesting order. pre-link of levelThree. But in your example, there is no link attribute, no pre-link, and no post-link, it is just a simple compile. So output the result as shown in your diagram. You can take a closer look at the differences between the code in that article and yours.