Ordine di chiamata della funzione di collegamento in direttive angularjs nidificate e ripetute

Question

Sono abbastanza nuovo per la programmazione Javascript e ho solo toccato AngularJS. Per valutarlo ho deciso di scrivere un'applicazione per appunti semplice. Il modello è davvero semplice, un elenco di note in cui ogni nota ha un'etichetta, un testo e un elenco di tag. Tuttavia mi sono imbattuto in problemi nel passaggio di dati tra ambiti isolati di direttive nidificate.

Ho tre direttive, note, note e tagger (che definiscono nuovi elementi con gli stessi nomi). Ognuno di loro utilizza un ambito isolato.

La direttiva notes usa ng-repeat per "rendere" ciascuna delle sue note con l'elemento note.

La direttiva note utilizza l'elemento tagger per "rendere" l'elenco di tag.

La direttiva note definisce l'ambito: {getNote: "&", ...} per passare un'istanza di nota dall'elenco di note al controller di nota/direttiva. La funzione getNote (index) viene chiamata nella funzione di collegamento della direttiva note. Funziona bene!

La direttiva tagger definisce l'ambito: {getTags: "&", ...} per passare un elenco di tag per una determinata nota al controller/direttiva tagger. La funzione getTags viene chiamata nella funzione di collegamento della direttiva tagger. Questo non funziona!

Come ho capito, il problema è che le funzioni di collegamento delle direttive sono chiamate in un ordine incoerente. Debug dell'applicazione mostra che le funzioni di collegamento vengono chiamate nel seguente ordine:

funzione

1. collegamento nelle note direttiva (aggiungendo la funzione getNote al campo di applicazione note) funzione di collegamento

2. nella direttiva tagger della prima nota (chiamando getTags dell'area nota genitore) funzione

3. funzione di collegamento nella prima direttiva nota (aggiungendo i getTags al campo di applicazione) (chiamando getNote nel campo di applicazione note madri) funzione di collegamento

4. nella direttiva tagger della seconda nota (chiamando getTags dell'area nota genitore funzione)

5. funzione di collegamento nella seconda direttiva nota (aggiungendo i getTags per il campo di applicazione) (chiamando getNote nel genitore note portata)

Questo non funziona in quanto a # 2 il campo di applicazione della prima nota non ha ancora una funzione getTags.

Un esempio semplicistico può essere trovato in Plunker.

Quindi, la mia domanda si riduce a: cosa determina l'ordine in cui le funzioni di collegamento vengono chiamate in direttive nidificate.

(Ho risolto il problema utilizzando $ watch su getTags nella direttiva tagger ...)

riguarda

Answer 1

Citando Josh D. Miller che aveva gentilmente risposto ad una domanda simile che ho avuto:

"Solo un paio di note tecniche Supponiamo di avere questa marcatura:.

<div directive1> 
    <div directive2> 
    <!-- ... --> 
    </div> 
</div> 

ora AngularJS creerà le direttive eseguendo funzioni direttive in un certo ordine:

direttiva1: compilare

direttiva2: compilare

direttiva1: Controller

direttiva1: pre-link

direttiva2: Controller

direttiva2: pre-link

direttiva2: post-Link

direttiva1: post-Link

Di default una funzione di diritto "link" è un post-link, in modo da funzione di collegamento del vostro direttiva1 esterno non lo farà eseguire fino a quando è stata eseguita la funzione di collegamento della direttiva interna interna. Ecco perché diciamo che è sicuro manipolare DOM nel post-link. "

Answer 2

Su un singolo elemento dell'ordine delle funzioni di collegamento è determinato dall'ordine delle funzioni di compilazione che a sua volta è ordinata secondo il priority proprietà dell'oggetto definizione direttiva.

Fonte

: http://docs.angularjs.org/guide/directive

su diversi elementi con inclusione: le direttive interne sono valutate prima direttive esterne. Motivo: natura di transclusione.

Su più elementi con fratelli: eseguiti in ordine dall'alto al basso. Motivo: analisi della logica di $ compilazione.