angulaire.js - Quelle est la différence entre les paramètres de compilation (tElement, tAttrs) de la directive angulaire et les paramètres (scope, iElement, iAttrs) du lien ?

Question

RT :
Écrivez vos propres instructions angulaires :

        compile:function(tElement,tAttrs,linker){

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

            }
        }

La fonction de compilation a trois paramètres (tElement, tAttrs, linker),
La fonction de lien a cinq paramètres (scope, iElement, iAttrs, ctrl, linker)
Dans quelles circonstances tElement et iElement, tAttrs et iAttrs seront-ils différents ?
Après de nombreuses tentatives d'imbrication des instructions, je n'ai trouvé aucune différence entre elles. Cependant, j'ai lu dans le livre que ce sera différent dans quels scénarios cela sera-t-il différent ?

--------------------------Ligne de séparation------------------ - -----------------

Après avoir lu cet article, l'ordre d'exécution de levelOne imbriqué levelTwo imbriqué levelThree, compiler et lier dans l'article devrait être :
compile-levelOne, compile-levelTwo, compile-levelThree, c'est-à-dire exécutez d'abord toutes les compilations, puis exécutez la fonction de lien.
Mais l'ordre d'exécution des deux instructions que j'ai écrites moi-même n'est pas comme ça. Il exécute d'abord la compilation de la couche externe et le lien de la couche externe, puis exécute la compilation de la couche interne et le lien de la couche interne...
J'espère pouvoir obtenir des conseils du maître, merci~~~

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

La commande finale imprimée est la suivante :

Il exécute d'abord la compilation de la couche externe cbRepeat, puis exécute le lien de cbRepeat, puis la compilation de la couche interne myWidget, le lien de myWidget...

J'ai le vertige~~~ Je demande des réponses~~~ Merci~~~

Answer 1

Pour la différence entre les fonctions de compilation et de liaison dans les instructions, il est recommandé de lire l'introduction de cet 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

J'ai lu cet article et votre réponse. Je pense que cela est dû à la différence de compréhension. Dans l'article original, cela signifie d'abord exécuter la compilation de levelOne - levelThree dans l'ordre d'imbrication, puis l'exécuter dans l'imbrication. order.levelOne - pré-lien de levelThree. Mais dans votre exemple, il n'y a pas d'attribut de lien, pas de pré-lien et pas de post-lien, c'est juste une simple compilation. Affichez donc le résultat comme indiqué dans votre diagramme. Vous pouvez examiner de plus près les différences entre le code de cet article et le vôtre.