Alcuni posti sembrano usare la funzione controller per la logica direttiva e altri usano il link. L'esempio di schede nella homepage angolare utilizza controller per uno e collegamento per un'altra direttiva. Qual è la differenza tra i due?
Alcuni posti sembrano usare la funzione controller per la logica direttiva e altri usano il link. L'esempio di schede nella homepage angolare utilizza controller per uno e collegamento per un'altra direttiva. Qual è la differenza tra i due?
Risposte:
Espanderò un po 'la tua domanda e includerò anche la funzione di compilazione.
funzione di compilazione : utilizzare per la manipolazione del modello DOM (ovvero la manipolazione di tElement = elemento modello), quindi le manipolazioni che si applicano a tutti i cloni DOM del modello associato alla direttiva. (Se è necessaria anche una funzione di collegamento (o funzioni pre e post collegamento) e è stata definita una funzione di compilazione, la funzione di compilazione deve restituire le funzioni di collegamento perché l' 'link'
attributo viene ignorato se l' 'compile'
attributo è definito.)
funzione link - normalmente utilizzata per la registrazione di callback listener (es. $watch
espressioni nell'ambito) e per l'aggiornamento del DOM (es. manipolazione di iElement = elemento istanza individuale). Viene eseguito dopo la clonazione del modello. Ad esempio, all'interno di un <li ng-repeat...>
, la funzione di collegamento viene eseguita dopo che il <li>
modello (tElement) è stato clonato (in un iElement) per quel particolare <li>
elemento. A $watch
consente a una direttiva di essere informata delle modifiche alle proprietà dell'ambito (un ambito è associato a ciascuna istanza), che consente alla direttiva di eseguire il rendering di un valore di istanza aggiornato sul DOM.
funzione controller - deve essere utilizzata quando un'altra direttiva deve interagire con questa direttiva. Ad esempio, nella home page di AngularJS, la direttiva pane deve aggiungersi all'ambito gestito dalla direttiva tabs, quindi la direttiva tabs deve definire un metodo controller (think API) a cui la direttiva pane può accedere / chiamare.
Per una spiegazione più approfondita delle schede e delle direttive dei riquadri e del perché la direttiva tabs crea una funzione sul suo controller usando this
(piuttosto che su $scope
), vedere 'this' vs $ scope nei controller AngularJS .
In generale, è possibile inserire metodi, $watches
ecc. Nel controller della direttiva o nella funzione di collegamento. Il controller verrà eseguito per primo, il che a volte è importante (vedere questo violino che registra quando le funzioni ctrl e link vengono eseguite con due direttive nidificate). Come Josh ha menzionato in un commento , potresti voler inserire funzioni di manipolazione dell'ambito all'interno di un controller solo per coerenza con il resto del framework.
mouseover
, l'altro l'ambito delle modifiche alle proprietà. Grande differenza.
A complemento della risposta di Mark, la funzione di compilazione non ha accesso all'ambito, ma la funzione di collegamento sì.
Consiglio vivamente questo video; Scrivere direttive di Misko Hevery (il padre di AngularJS), dove descrive le differenze e alcune tecniche. (Differenza tra la funzione di compilazione e la funzione di collegamento alle 14:41 nel video ).
Convenzione angolare: scrivere la logica aziendale nel controller e manipolazione DOM nel collegamento.
Oltre a questo, puoi chiamare una funzione controller dalla funzione link di un'altra direttiva, ad esempio hai 3 direttive personalizzate
<animal>
<panther>
<leopard></leopard>
</panther>
</animal>
e si desidera accedere agli animali dall'interno della direttiva "leopardo".
http://egghead.io/lessons/angularjs-directive-communication sarà utile per conoscere la comunicazione inter-direttiva
compile
sarà sempre eseguito prima controller
.
funzione di compilazione -
sintassi
function compile(tElement, tAttrs, transclude) { ... }
controllore
pre-link
La funzione di collegamento è responsabile della registrazione dei listener DOM e dell'aggiornamento del DOM. Viene eseguito dopo la clonazione del modello. Qui è dove verrà messa la maggior parte della logica direttiva.
È possibile aggiornare il dom nel controller usando angular.element, ma ciò non è raccomandato poiché l'elemento è fornito nella funzione link
La funzione pre-link viene utilizzata per implementare la logica che viene eseguita quando js angolare ha già compilato gli elementi figlio ma prima che uno qualsiasi dei post link dell'elemento figlio sia stato chiamato
post-Link
direttiva che ha solo la funzione link, angolare tratta la funzione come post link
il post verrà eseguito dopo la compilazione, il controller e la funzione pre-link, quindi questo è considerato il posto più sicuro e predefinito per aggiungere la tua logica direttiva