angular.js - What is the difference between the compile parameters (tElement, tAttrs) of the angular directive and the parameters (scope, iElement, iAttrs) in the link?

Question

RT:
Write your own angular instructions:

        compile:function(tElement,tAttrs,linker){

            return function(scope,iEle,iAttrs,ctrl,linker){

            }
        }

The compile function has three parameters (tElement, tAttrs, linker),
The link function has five parameters (scope, iElement, iAttrs, ctrl, linker)
Under what circumstances will tElement and iElement, tAttrs and iAttrs be different?
After many attempts to nest instructions, I have not found any difference between them. However, I read in the book that it will be different. In what scenarios will it be different? Are there any chestnuts?

--------------------------Separating line------------------ ------------------
After reading this article, the execution order of levelOne nested levelTwo nested levelThree, compile and link in the article should be:
compile-levelOne, compile-levelTwo, compile-levelThree, that is, execute all compile first, and then execute the link function.
But the execution order of the two instructions I wrote myself is not like this. It first executes the outer layer compile and the outer layer link, and then executes the inner layer compile and inner layer link...
I hope I can get some guidance from the master, thank you~~~

  <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())
            }
        }        
    }
});

The final printed order is as follows:

It first executes the compile of the outer layer cbRepeat, then executes the link of cbRepeat, and then the compile of the inner layer myWidget, the link of myWidget...
I'm dizzy~~~ I beg for answers~~~ Thank you~~~

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.