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?
javascript
angularjs
web-applications
javascript-framework
user1558259
quelle
quelle
Antworten:
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 -
$watch
Wird 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$watch
ermö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
$watches
usw. 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.quelle
mouseover
, der andere auf den Bereich für Eigenschaftsänderungen. Großer Unterschied.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 ).
quelle
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
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
quelle
compile
wird immer vorher ausgeführtcontroller
.Kompilierungsfunktion -
Syntax
Regler
Pre-Link
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.
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
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
Direktive, die nur Link-Funktion hat, behandelt Angular die Funktion als Post-Link
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
quelle