Maison > Article > interface Web > Parlons des fonctions preLink et postLink dans la directive angulaire
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.
[Recommandation associée : "tutoriel angulaire"]
L'option de modèle de directive comporte deux champs : respecter et lien. la relation suivante :
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 :
app.directive('myDirective', function () { return { compile: function () { return { pre: function () { console.log('preLink'); }, post: function () { console.log('postLink'); } } } } });
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('myDirective', function () { return function () { console.log('postLink'); } });
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('myApp', []); var names = ['a1', 'b1', 'b2', 'e1', 'd1']; names.forEach(function (name) { app.directive(name, function () { return { compile: function () { console.log(name + ' compile'); return { pre: function () { console.log(name + ' preLink'); }, post: function () { console.log(name + ' postLink'); } }; } }; }); });
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
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('myApp', []); app.directive('myParent', function () { return { restrict: 'EA', template: '<div>{{greeting}}{{name}}'+ '<my-child></my-child>'+ '</div>', link: function(scope,elem,attr){ scope.name = 'Lovesueee'; scope.greeting = 'Hey, I am '; } }; }); app.directive('myChild', function () { return { restrict: 'EA', template: '<div>{{says}}</div>', link: function(scope,elem,attr){ scope.says = 'Hey, I am child, and my parent is ' + scope.name; } }; });
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
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!