Unterschied zwischen den Funktionen 'controller', 'link' und 'compile' beim Definieren einer Direktive

Einige Orte scheinen die Controller-Funktion für die Direktivenlogik zu verwenden, andere verwenden Link. Das Beispiel für Registerkarten auf der eckigen Homepage verwendet Controller für eine und Link für eine andere Direktive. Was ist der Unterschied zwischen den beiden?

Ich werde Ihre Frage ein wenig erweitern und auch die Kompilierungsfunktion einschließen.

• Kompilierungsfunktion - Verwendung für die DOM-Manipulation von Vorlagen (dh Manipulation von tElement = Template-Element), daher Manipulationen, die für alle DOM-Klone der Vorlage gelten, die der Direktive zugeordnet sind. (Wenn Sie auch eine Verknüpfungsfunktion (oder Funktionen vor und nach der Verknüpfung) benötigen und eine Kompilierungsfunktion definiert haben, muss die Kompilierungsfunktion die Verknüpfungsfunktion (en) zurückgeben, da das 'link'Attribut ignoriert wird, wenn das 'compile'Attribut definiert ist.)

• Link-Funktion - $watchWird normalerweise zum Registrieren von Listener-Rückrufen (dh Ausdrücken im Bereich) sowie zum Aktualisieren des DOM (dh zum Manipulieren von iElement = einzelnem Instanzelement) verwendet. Es wird ausgeführt, nachdem die Vorlage geklont wurde. Beispielsweise wird in einem <li ng-repeat...>die Verknüpfungsfunktion ausgeführt, nachdem die <li>Vorlage (tElement) für dieses bestimmte <li>Element (in ein iElement) geklont wurde . A $watchermöglicht es einer Direktive, über Änderungen der Bereichseigenschaften informiert zu werden (jeder Instanz ist ein Bereich zugeordnet), wodurch die Direktive einen aktualisierten Instanzwert im DOM rendern kann.

• Controller-Funktion - muss verwendet werden, wenn eine andere Direktive mit dieser Direktive interagieren muss. Auf der AngularJS-Homepage muss sich die Pane-Direktive beispielsweise selbst zu dem von der Tabs-Direktive verwalteten Bereich hinzufügen. Daher muss die Tabs-Direktive eine Controller-Methode (Think API) definieren, auf die die Pane-Direktive zugreifen / sie aufrufen kann.
  
  Eine ausführlichere Erläuterung der Registerkarten- und Fensteranweisungen und warum die Registerkartenanweisung eine Funktion auf ihrem Controller mit this(und nicht mit $scope) erstellt, finden Sie unter 'this' vs $ scope in AngularJS-Controllern .

Im Allgemeinen können Sie Methoden $watchesusw. entweder in die Controller- oder die Link-Funktion der Direktive einfügen. Der Controller wird zuerst ausgeführt, was manchmal wichtig ist (siehe diese Geige, die protokolliert, wenn die Funktionen Strg und Link mit zwei verschachtelten Anweisungen ausgeführt werden). Wie Josh in einem Kommentar erwähnt hat , möchten Sie möglicherweise Funktionen zur Manipulation des Bereichs in einen Controller einfügen, um die Konsistenz mit dem Rest des Frameworks zu gewährleisten.

Als Ergänzung zu Marks Antwort hat die Kompilierungsfunktion keinen Zugriff auf den Gültigkeitsbereich, die Verknüpfungsfunktion jedoch.

Ich kann dieses Video wirklich empfehlen. Schreiben von Anweisungen von Misko Hevery (dem Vater von AngularJS), in denen er Unterschiede und einige Techniken beschreibt. (Unterschied zwischen Kompilierungsfunktion und Verknüpfungsfunktion um 14:41 Uhr im Video ).

1. Code vor dem Kompilieren ausführen: Controller verwenden
2. Ausführen von Code nach der Kompilierung: Verwenden Sie Link

Winkelkonvention: Schreiben Sie Geschäftslogik in Controller und DOM-Manipulation in Link.

Abgesehen davon können Sie eine Controller-Funktion aus der Link-Funktion einer anderen Direktive aufrufen. Zum Beispiel haben Sie 3 benutzerdefinierte Direktiven

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

und Sie möchten von innerhalb der "Leoparden" -Richtlinie auf Tiere zugreifen.

http://egghead.io/lessons/angularjs-directive-communication ist hilfreich, um Informationen zur Kommunikation zwischen Richtlinien zu erhalten

Kompilierungsfunktion -

1. wird vor der Controller- und Link-Funktion aufgerufen.
2. In der Kompilierungsfunktion verfügen Sie über das ursprüngliche Vorlagen-DOM, sodass 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 ein perfektes Beispiel - die ursprüngliche Syntax ist ein Vorlagenelement, die wiederholten Elemente in HTML sind Instanzen
4. Es können mehrere Elementinstanzen und nur ein Vorlagenelement vorhanden sein
5. Umfang ist noch nicht verfügbar
6. Die Kompilierungsfunktion kann Funktion und Objekt zurückgeben
7. Rückgabe einer (Post-Link-) Funktion - entspricht der Registrierung der Link-Funktion über die Link-Eigenschaft des Konfigurationsobjekts, wenn die Kompilierungsfunktion leer ist.
8. Zurückgeben eines Objekts mit Funktionen, die über Pre- und Post-Eigenschaften registriert wurden - Mit dieser Option können Sie steuern, wann eine Verknüpfungsfunktion während der Verknüpfungsphase aufgerufen werden soll. Informationen zu Vor- und Nachverknüpfungsfunktionen finden Sie weiter unten.

Syntax

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

Regler

1. wird nach der Kompilierungsfunktion aufgerufen
2. Umfang ist hier verfügbar
3. kann von anderen Anweisungen aufgerufen werden (siehe Attribut require)

Pre-Link

1. Die Link-Funktion ist für die Registrierung von DOM-Listenern sowie für die Aktualisierung des DOM verantwortlich. Es wird ausgeführt, nachdem die Vorlage geklont wurde. Hier wird der größte Teil der Richtlinienlogik platziert.

2. Sie können den Dom in der Steuerung mit angle.element aktualisieren. Dies wird jedoch nicht empfohlen, da das Element in der Verknüpfungsfunktion bereitgestellt wird

3. Die Vorverknüpfungsfunktion wird verwendet, um eine Logik zu implementieren, die ausgeführt wird, wenn der Winkel js die untergeordneten Elemente bereits kompiliert hat, jedoch bevor eine der Nachverknüpfungen des untergeordneten Elements aufgerufen wurde

Post-Link

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

2. post wird nach der Kompilierungs-, Controller- und Pre-Link-Funktion ausgeführt. Aus diesem Grund wird dies als der sicherste und standardmäßigste Ort zum Hinzufügen Ihrer Direktivenlogik angesehen