Angular-Direktiven - wann und wie man compile, controller, pre-link und post-link verwendet

Question

Beim Schreiben einer Angular-Direktive kann man eine der folgenden Funktionen verwenden, um das DOM-Verhalten, den Inhalt und das Aussehen des Elements zu manipulieren, auf dem die Direktive deklariert ist:

• compile
• controller
• pre-link
• post-link

Es scheint einige Verwirrung darüber zu geben, welche Funktion verwendet werden soll. Diese Frage behandelt:

Direktive Grundlagen

• Wie deklariert man die verschiedenen Funktionen?
• Was ist der Unterschied zwischen einem Quellvorlagen und einer Instanzvorlage?
• In welcher Reihenfolge werden die Direktivfunktionen ausgeführt?
• Was passiert sonst noch zwischen diesen Funktionsaufrufen?

Funktionsnatur, Do's und Dont's

• Kompilieren
• Controller
• Vorlinken
• Nachlinken

Ähnliche Fragen:

• Direktive: link vs compile vs controller.
• Unterschied zwischen den Funktionen 'controller', 'link' und 'compile' bei der Definition einer Angular.js Direktive.
• Was ist der Unterschied zwischen der Kompilier- und Link-Funktion in Angularjs.
• Unterschied zwischen dem Vor-Kompilierungs- und Nach-Kompilierungselement in AngularJS Direktiven?.
• Angular JS Direktive - Vorlage, kompilieren oder verlinken?.
• Nachlinken vs Vorlinken in AngularJS Direktiven.

Answer 1

Funktion des Controllers

Die controller-Funktion jeder Direktive wird jedes Mal aufgerufen, wenn ein neues zugehöriges Element instanziiert wird.

Offiziell ist die controller-Funktion der Ort, an dem:

• Controller-Logik (Methoden) definiert wird, die zwischen Controllern gemeinsam genutzt werden können.
• Bereichsvariablen initiiert werden.

Es ist erneut wichtig zu beachten, dass, wenn die Direktive einen isolierten Bereich betrifft, alle Eigenschaften darin, die vom übergeordneten Bereich erben, noch nicht verfügbar sind.

Mach es:

• Definiere Controller-Logik
• Initiiere Bereichsvariablen

Mache es nicht:

• Prüfe Kinderelemente (sie sind möglicherweise noch nicht gerendert, an den Bereich gebunden, usw.).

Answer 2

Post-Link-Funktion

Wenn die post-link-Funktion aufgerufen wird, haben alle vorherigen Schritte stattgefunden - Bindung, Transklusion, usw.

Dies ist typischerweise ein Ort, um das gerenderte DOM weiter zu manipulieren.

Machen Sie:

• Manipulieren Sie DOM (gerenderte und daher instanziierte) Elemente.
• Fügen Sie Ereignisbehandler hinzu.
• Inspektieren Sie Kind-Elemente.
• Richten Sie Beobachtungen auf Attribute ein.
• Richten Sie Beobachtungen auf den Bereich ein.

Answer 3

Vor-Link Funktion

Jedes pre-link Funktion der Direktive wird jedes Mal aufgerufen, wenn ein neues zugehöriges Element instanziiert wird.

Wie bereits im Abschnitt zur Kompilierungsreihenfolge zu sehen ist, werden pre-link Funktionen zuerst für das Elternelement und dann für das Kindelement aufgerufen, während post-link Funktionen umgekehrt für das Kind- und dann das Elternelement aufgerufen werden.

Die pre-link Funktion wird selten verwendet, kann aber in speziellen Szenarien nützlich sein; zum Beispiel, wenn ein Kind-Controller sich beim Eltern-Controller registriert, die Registrierung aber in einer Eltern-dann-Kind Art und Weise erfolgen muss (ngModelController macht dies so).

Nicht:

• Kindelemente inspizieren (sie sind möglicherweise noch nicht gerendert, an den Scope gebunden usw.).