Heim > Artikel > Web-Frontend > Lassen Sie uns über die Funktionen preLink und postLink in der Angular-Direktive sprechen
In diesem Artikel werden Ihnen die Funktionen preLink und postLink im Befehl angular vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
【Verwandte Empfehlung: „Angular Tutorial“】
Die Anweisungsvorlagenoption hat zwei Felder: Kompilieren und Verknüpfen. Es besteht die folgende Beziehung zwischen den beiden:
angular
Dadurchdirective.compile = valueFn(directive.link);
Umschließen Sie eine Ebene und verwenden Sie das benutzerdefinierte Linkfeld. angular
通过这样directive.compile = valueFn(directive.link);
包装一层,使用用户定义的link字段。而link分为preLink和postLink两个阶段,从link字段或者compile函数的返回值来看:
app.directive('myDirective', function () { return { compile: function () { return { pre: function () { console.log('preLink'); }, post: function () { console.log('postLink'); } } } } });
我们的指令工厂返回的是一个函数,那么angular通过这样的包装 directive = { compile: valueFn(directive) }
,即该函数将作为指令对象的postLink函数,像这样:
app.directive('myDirective', function () { return function () { console.log('postLink'); } });
为了看清angular编译链接指令的顺序,用以下代码输出日志的方式来说明:
<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'); } }; } }; }); });
输出:
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
可以看出:
所有的指令都是先compile,然后preLink,然后postLink。
节点指令的preLink是在所有子节点指令preLink,postLink之前,所以一般这里就可以通过scope给子节点传递一定的信息。
节点指令的postLink是在所有子节点指令preLink,postLink完毕之后,也就意味着,当父节点指令执行postLink时,子节点postLink已经都完成了,此时子dom树已经稳定
Wenn es sich um eine Funktion handelt, wird ein solcher Link als postLink betrachtet.
<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; } }; });Unsere Anweisungsfabrik gibt eine Funktion zurück und umschließt sie dann wie folgt:
directive = { compile: valueFn(directive) }
, das heißt, diese Funktion wird wie folgt als PostLink-Funktion des Anweisungsobjekts verwendet: Hey, I am Lovesueee Hey, I am child, and my parent is undefined
rrreee
Ausgabe:rrreee
Es ist zu sehen:Alle Anweisungen werden zuerst kompiliert, dann preLink, dann postLink.
🎜🎜Der preLink der Knotenanweisung liegt vor den preLink- und postLink-Anweisungen aller untergeordneten Knoten, sodass Sie hier im Allgemeinen bestimmte Informationen über den Bereich an die untergeordneten Knoten weitergeben können. 🎜🎜🎜🎜🎜Der postLink der Knotenanweisung erfolgt, nachdem alle untergeordneten Knotenanweisungen preLink und postLink abgeschlossen sind. Dies bedeutet, dass der untergeordnete Knoten postLink abgeschlossen ist, wenn der übergeordnete Knotenbefehl postLink ausführt. line -height:1.8; Vertical-align:top; padding:0.2em 0px!important; ; color:rgb(234,23,23)!important">Der Sub-DOM-Baum wurde stabilisiert, daher befinden sich die meisten unserer DOM-Operationen und der Zugriff auf untergeordnete Knoten in diesem Stadium. 🎜🎜🎜🎜🎜Der Prozess der Linkanweisung ist eigentlich ein Tiefendurchlaufprozess, und die Ausführung von postLink ist eigentlich ein Backtracking-Prozess. 🎜🎜🎜🎜🎜Es können mehrere Anweisungen auf dem Knoten vorhanden sein, die beim Sammeln in einer bestimmten Reihenfolge angeordnet werden (sortiert nach Priorität). Bei der Ausführung wird preLinks in Vorwärtsreihenfolge ausgeführt, während PostLinks in umgekehrter Reihenfolge ausgeführt wird. 🎜🎜🎜🎜🎜Nachdem Sie dies verstanden haben, müssen Sie sich vor einigen leicht zu übersehenden Fallen in Acht nehmen. 🎜rrreee🎜Die Ausgabe des Ergebnis-Unterbefehls ist undefiniert🎜rrreee🎜 Wie oben dargestellt ist der Link der myParent-Anweisung eine PostLink-Funktion, und diese Funktion wird ausgeführt, nachdem preLink und postLink der myChild-Anweisung ausgeführt wurden. Also Scope.name = undefiniert. 🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜Das obige ist der detaillierte Inhalt vonLassen Sie uns über die Funktionen preLink und postLink in der Angular-Direktive sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!