Parlons des fonctions preLink et postLink dans la directive angulaire-js tutoriel-php.cn

Parlons des fonctions preLink et postLink dans la directive angulaire

青灯夜游

Libérer： 2021-05-19 10:08:23

avant

2877 Les gens l'ont consulté

Cet article vous présentera les fonctions preLink et postLink dans la directive angular. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Parlons des fonctions preLink et postLink dans la directive angulaire

[Recommandation associée : "tutoriel angulaire"]

L'option de modèle de directive comporte deux champs : respecter et lien. la relation suivante :

Lorsque le champ de compilation existe, le champ de lien sera ignoré et la valeur de retour de la fonction de compilation sera utilisée comme champ de lien.
Lorsque la compilation n'existe pas et que le champ de lien existe, angular enveloppez un calque comme celui-ci directive.compile = valueFn(directive.link); et utilisez le champ de lien défini par l'utilisateur.

Le lien est divisé en deux étapes : preLink et postLink. À en juger par le champ du lien ou la valeur de retour de la fonction de compilation :

Si c'est le cas. une fonction, alors ceci Le lien sera considéré comme postLink.
S'il s'agit d'un objet, alors link.pre sert de fonction preLink et link.post sert de fonction postLink.

app.directive(&#39;myDirective&#39;, function () {
  return {
      compile: function () {
          return {
              pre: function () {
                  console.log(&#39;preLink&#39;);
              },
              post: function () {
                  console.log(&#39;postLink&#39;);
              }
          }
      }
  }
});

Copier après la connexion

Notre fabrique d'instructions renvoie une fonction, puis angulaire l'enveloppe comme ceci directive = { compile: valueFn(directive) }, c'est-à-dire que la fonction sera utilisée comme fonction postLink de l'objet instruction, comme ceci :

app.directive(&#39;myDirective&#39;, function () {
  return function () {
    console.log(&#39;postLink&#39;);
  }
});

Copier après la connexion

L'ordre de compilation angulaire et les instructions de lien

Afin de voir clairement l'ordre de compilation angulaire et les instructions de lien, utilisez le code suivant pour afficher le journal :

<body ng-app="myApp">
    <A a1>
        <B b1 b2></B>
        <C>
            <E e1></E>
            <F>
              <G></G>
            </F>
        </C>
        <D d1></D>
    </A>
</body>
 
var app = angular.module(&#39;myApp&#39;, []);
var names = [&#39;a1&#39;, &#39;b1&#39;, &#39;b2&#39;, &#39;e1&#39;, &#39;d1&#39;];
 
names.forEach(function (name) {
  app.directive(name, function () {
    return {
        compile: function () {
             console.log(name + &#39; compile&#39;);
            return {
                pre: function () {
                    console.log(name + &#39; preLink&#39;);
                },
                post: function () {
                    console.log(name + &#39; postLink&#39;);
                }
            };
        }
    };
  });
});

Copier après la connexion

Sortie :

a1 compile
b1 compile
b2 compile
e1 compile
d1 compile
a1 preLink
b1 preLink
b2 preLink
b2 postLink
b1 postLink
e1 preLink
e1 postLink
d1 preLink
d1 postLink
a1 postLink

Copier après la connexion

On peut voir que :

Toutes les instructions sont d'abord compilées, puis preLink, puis postLink.
Le preLink de l'instruction de nœud est avant les instructions preLink et postLink de tous les nœuds enfants, donc généralement ici, vous pouvez transmettre certaines informations aux nœuds enfants via la portée.
Le postLink de l'instruction de nœud est une fois que toutes les instructions de nœud enfant preLink et postLink sont terminées, ce qui signifie que lorsque l'instruction de nœud parent exécute postLink, le nœud enfant postLink a été terminé, à ce moment 子dom树已经稳定, donc la plupart de nos opérations DOM et l'accès aux nœuds enfants sont à ce stade. Le processus d'instruction
dans link est en fait un processus de traversée en profondeur, et l'exécution de postLink est en fait un processus de retour en arrière.
Il peut y avoir plusieurs instructions sur le nœud lors de la collecte, elles seront classées dans un certain ordre (triées par priorité). Une fois exécutées, preLinks est exécuté dans l'ordre normal. , tandis que postLinks Il est exécuté dans l'ordre inverse.

Après avoir compris cela, vous devez faire attention à certains pièges facilement négligés.

<body ng-app="myApp">
    <my-parent></my-parent>
</body>
 
var app = angular.module(&#39;myApp&#39;, []);
 
app.directive(&#39;myParent&#39;, function () {
    return {
        restrict: &#39;EA&#39;,
        template: &#39;<div>{{greeting}}{{name}}&#39;+
        &#39;<my-child></my-child>&#39;+
        &#39;</div>&#39;,
        link: function(scope,elem,attr){
            scope.name = &#39;Lovesueee&#39;;
            scope.greeting = &#39;Hey, I am &#39;;
        }
    };
});
app.directive(&#39;myChild&#39;, function () {
    return {
        restrict: &#39;EA&#39;,
        template: &#39;<div>{{says}}</div>&#39;,
        link: function(scope,elem,attr){
            scope.says = &#39;Hey, I am child, and my parent is &#39; + scope.name;
        }
    };
});

Copier après la connexion

La sortie de la sous-commande résultat n'est pas définie

Hey, I am Lovesueee
Hey, I am child, and my parent is undefined

Copier après la connexion

D'après ce qui précède, le lien de l'instruction myParent est une fonction postLink, et cette fonction sera exécutée après le preLink et le postLink du Les instructions myChild sont exécutées. Donc scope.name = non défini.

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!