Unterschied zwischen den Funktionen 'controller', 'link' und 'compile' bei der Definition einer Richtlinie

Question

An einigen Stellen scheint die Controller-Funktion für die Richtlinienlogik verwendet zu werden, an anderen die Link-Funktion. Das Tabs-Beispiel auf der Angular-Homepage verwendet Controller für eine und Link für eine andere Direktive. Was ist der Unterschied zwischen den beiden?

Answer 1

Ich werde Ihre Frage ein wenig erweitern und auch die Kompilierfunktion einbeziehen.

• Kompilierfunktion - Verwendung für Vorlage DOM-Manipulation (d.h. Manipulation von tElement = Template-Element), also Manipulationen, die für alle DOM-Klone des mit der Richtlinie verbundenen Templates gelten. (Wenn Sie auch eine Link-Funktion (oder Pre- und Post-Link-Funktionen) benötigen und eine Compile-Funktion definiert haben, muss die Compile-Funktion die Link-Funktion(en) zurückgeben, da die 'link' wird ignoriert, wenn das Attribut 'compile' Attribut definiert ist).

• Link-Funktion - normalerweise für die Registrierung von Listener-Callbacks verwenden (d.h., $watch Ausdrücke auf dem Scope) sowie die Aktualisierung des DOM (d.h. die Manipulation von iElement = individuelles Instanzelement). Sie wird ausgeführt, nachdem die Vorlage geklont worden ist. Z.B. innerhalb einer <li ng-repeat...> wird die Verknüpfungsfunktion nach der <li> Vorlage (tElement) geklont wurde (in ein iElement) für diese bestimmte <li> Element. A $watch ermöglicht es einer Richtlinie, über Änderungen von Bereichseigenschaften benachrichtigt zu werden (jeder Instanz ist ein Bereich zugeordnet), was es der Richtlinie ermöglicht, einen aktualisierten Instanzwert in das DOM zu übertragen.

• Reglerfunktion - muss verwendet werden, wenn eine andere Richtlinie mit dieser Richtlinie interagieren muss. Auf der AngularJS-Startseite muss sich die pane-Direktive beispielsweise in den von der tabs-Direktive verwalteten Bereich einfügen. Daher muss die tabs-Direktive eine Controller-Methode (siehe API) definieren, auf die die pane-Direktive zugreifen kann.

  Für eine ausführlichere Erklärung der Direktiven tabs und pane und warum die Direktive tabs eine Funktion auf ihrem Controller mit this (und nicht auf $scope ), siehe 'this' vs. $scope in AngularJS-Controllern .

Im Allgemeinen können Sie Methoden einsetzen, $watches usw. entweder in die Controller- oder die Link-Funktion der Richtlinie. Der Controller wird zuerst ausgeführt, was manchmal wichtig ist (siehe diese fiddle die protokolliert, wenn die Funktionen ctrl und link mit zwei verschachtelten Direktiven ausgeführt werden). Wie Josh in einer Kommentar können Sie die Funktionen zur Bereichsmanipulation aus Gründen der Konsistenz mit dem Rest des Frameworks in einen Controller integrieren.

Answer 2

Als Ergänzung zu Marks Antwort hat die Kompilierfunktion keinen Zugriff auf den Geltungsbereich, die Verknüpfungsfunktion hingegen schon.

Ich kann dieses Video nur empfehlen; Richtlinien schreiben von Misko Hevery (dem Vater von AngularJS), wo er die Unterschiede und einige Techniken beschreibt. (Unterschied zwischen Kompilierfunktion und Linkfunktion bei 14:41 Uhr im Video ).

Answer 3

1. Code vor der Kompilierung ausführen: verwenden Controller
2. Code nach der Kompilierung ausführen: verwenden Link

Angular-Konvention: Geschäftslogik im Controller und DOM-Manipulation im Link schreiben.

Außerdem können Sie eine Controller-Funktion von der Link-Funktion einer anderen Direktive aus aufrufen. z.B. haben Sie 3 benutzerdefinierte Direktiven

<animal>
<panther>
<leopard></leopard>
</panther> 
</animal>

und Sie möchten innerhalb der Richtlinie "leopard" auf das Tier zugreifen.

http://egghead.io/lessons/angularjs-directive-communication wird es hilfreich sein, über interdirektive Kommunikation Bescheid zu wissen

Answer 4

Kompilierfunktion -

1. wird vor der Controller- und Link-Funktion aufgerufen.
2. In der Kompilierfunktion steht Ihnen das ursprüngliche Template-DOM zur Verfügung, so dass Sie Änderungen am ursprünglichen DOM vornehmen können, bevor AngularJS eine Instanz davon erstellt und bevor ein Bereich erstellt wird
3. ng-repeat ist das perfekte Beispiel - die ursprüngliche Syntax ist ein Template-Element, die wiederholten Elemente in HTML sind Instanzen
4. Es kann mehrere Elementinstanzen und nur ein Vorlagenelement geben
5. Umfang ist noch nicht verfügbar
6. Kompilierfunktion kann Funktion und Objekt zurückgeben
7. Rückgabe einer (Post-Link-)Funktion - ist gleichbedeutend mit der Registrierung der Linking-Funktion über die Link-Eigenschaft des Config-Objekts, wenn die Compile-Funktion leer ist.
8. Rückgabe eines Objekts mit Funktionen, die über die Eigenschaften pre und post registriert sind - ermöglicht es Ihnen, zu steuern, wann eine Verknüpfungsfunktion während der Verknüpfungsphase aufgerufen werden soll. Siehe Informationen über Pre-Linking- und Post-Linking-Funktionen weiter unten.

Syntax

function compile(tElement, tAttrs, transclude) { ... }

Controller

1. die nach der Kompilierfunktion aufgerufen wird
2. Umfang ist hier verfügbar
3. kann von anderen Direktiven aufgerufen werden (siehe require-Attribut)

vor - link

1. Die Link-Funktion ist für die Registrierung von DOM-Listenern sowie für die Aktualisierung des DOM zuständig. Sie wird ausgeführt, nachdem die Vorlage geklont worden ist. Hier wird der größte Teil der Richtlinienlogik untergebracht.

2. Sie können das Dom in der Steuerung mit angular.element aktualisieren, aber dies wird nicht empfohlen, da das Element in der Link-Funktion bereitgestellt wird

3. Die Vorverknüpfungsfunktion wird verwendet, um eine Logik zu implementieren, die ausgeführt wird, wenn Angular Js die untergeordneten Elemente bereits kompiliert hat, aber bevor einer der Post-Links des untergeordneten Elements aufgerufen wurde

Post-Link

1. Direktive, die nur eine Link-Funktion hat, behandelt Angular die Funktion als einen Post-Link

2. post wird nach der Kompilierung, dem Controller und der Vorverknüpfungsfunktion ausgeführt, weshalb dies der sicherste und standardmäßige Ort ist, um Ihre Direktivenlogik hinzuzufügen