it-swarm.com.de

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

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

390
user1558259

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

  • Kompilierfunktion - Verwendung für Template DOM-Manipulation (dh Manipulation von tElement = Template-Element), daher gelten die entsprechenden Manipulationen auf alle DOM-Klone der mit der Direktive verknüpften Vorlage. (Wenn Sie auch eine Verknüpfungsfunktion (oder Vor- und Nachverknüpfungsfunktionen) benötigen und eine Kompilierungsfunktion definiert haben, muss die Kompilierungsfunktion die Verknüpfungsfunktion (en) zurückgeben, da das Attribut 'link' Ignoriert wird, wenn das Attribut 'compile' Attribut ist definiert.)

  • Link-Funktion - Wird normalerweise zum Registrieren von Listener-Callbacks (d. h. $watch - Ausdrücken für den Gültigkeitsbereich) sowie zum Aktualisieren des DOM (d. h. Manipulieren von iElement = einzelnes Instanzelement) verwendet. Sie wird ausgeführt, nachdem die Vorlage geklont wurde. Beispielsweise wird in einem <li ng-repeat...> Die Verknüpfungsfunktion ausgeführt, nachdem die Vorlage <li> (Element) für dieses bestimmte <li> - Element geklont wurde (in ein iElement). Mit $watch Kann eine Direktive über Änderungen der Bereichseigenschaften benachrichtigt werden (jeder Instanz ist ein Bereich zugeordnet), wodurch die Direktive einen aktualisierten Instanzwert für das DOM rendern kann.

  • controller function - muss verwendet werden, wenn eine andere Direktive mit dieser Direktive interagieren muss. Beispielsweise muss sich die pane-Direktive auf der AngularJS-Homepage selbst zu dem durch die tabs-Direktive verwalteten Bereich hinzufügen. Daher muss die tabs-Direktive eine Controller-Methode (think-API) definieren, auf die die pane-Direktive zugreifen/zugreifen kann.

    Für eine detailliertere Erklärung der Tabulatoren- und Bereichsanweisungen und warum die Tabulatorenanweisung eine Funktion auf ihrem Controller erstellt, verwenden Sie this (anstatt auf $scope) siehe 'this' vs $ scope in AngularJS-Controllern .

Im Allgemeinen können Sie Methoden, $watches Usw. entweder in die Controller- oder Link-Funktion der Direktive einfügen. Der Controller wird zuerst ausgeführt, was manchmal wichtig ist (siehe dies Geige das protokolliert, wenn die Funktionen ctrl und link mit zwei verschachtelten Direktiven ausgeführt werden). Wie Josh in einem Kommentar erwähnt hat, möchten Sie möglicherweise Funktionen zur Bereichsmanipulation in einen Controller einfügen, um die Übereinstimmung mit dem Rest des Frameworks zu gewährleisten.

630
Mark Rajcok

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

Ich kann dieses Video nur empfehlen. Schreibanweisungen von Misko Hevery (dem Vater von AngularJS), wo er Unterschiede und einige Techniken beschreibt. (Unterschied zwischen Compile-Funktion und Link-Funktion um 14:41 im Video markieren ).

56
Pixic
  1. code vor dem Kompilieren ausführen: Controller verwenden
  2. laufender Code nach dem Kompilieren: benutze Link

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

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

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

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

http://egghead.io/lessons/angularjs-directive-communication ist hilfreich, um mehr über die Kommunikation zwischen Richtlinien zu erfahren

35
Rahul

Kompilierfunktion -

  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 das 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 Kompilierfunktion kann Funktion und Objekt zurückgeben
  7. rückgabe einer (Nachverknüpfungs-) Funktion - entspricht der Registrierung der Verknüpfungsfunktion über die Verknüpfungseigenschaft des Konfigurationsobjekts, wenn die Kompilierungsfunktion leer ist.
  8. rückgabe eines Objekts mit Funktionen, die über Pre- und Post-Eigenschaften registriert wurden - Hiermit 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) { ... }

Controller

  1. wird nach der Kompilierfunktion aufgerufen
  2. umfang ist hier verfügbar
  3. kann durch andere Direktiven erreicht werden (siehe erforderliches Attribut)

Pre - Link

  1. Die Verknüpfungsfunktion ist für die Registrierung der DOM-Listener sowie für die Aktualisierung des DOM verantwortlich. Sie wird ausgeführt, nachdem die Vorlage geklont wurde. Hier wird der größte Teil der Anweisungslogik abgelegt.

  2. Sie können den Dom im Controller mit angle.element aktualisieren, dies wird jedoch nicht empfohlen, da das Element in der Link-Funktion bereitgestellt wird

  3. Die Pre-Link-Funktion wird verwendet, um Logik zu implementieren, die ausgeführt wird, wenn angular js die untergeordneten Elemente bereits kompiliert hat, aber bevor ein Post-Link des untergeordneten Elements aufgerufen wurde

Post-Link

  1. direktive, die nur Link-Funktion hat, angular behandelt die Funktion als Post-Link

  2. post wird nach der Kompilierung, dem Controller und der Pre-Link-Funktion ausgeführt. Aus diesem Grund wird dies als der sicherste und standardmäßigste Ort angesehen, an dem Sie Ihre Direktivenlogik hinzufügen können

6
Sunil Garg