Calling Reihenfolge der Link-Funktion in verschachtelten und wiederholten angularjs Anweisungen

Question

Ich bin ziemlich neu in Javascript-Programmierung und ich habe nur AngularJS berührt. Um es auszuwerten, entschied ich mich, eine einfache Notizanwendung zu schreiben. Das Modell ist wirklich einfach, eine Liste von Notizen, in denen jede Notiz ein Label, einen Text und eine Liste von Tags hat. Allerdings habe ich Probleme beim Übertragen von Daten zwischen isolierten Bereichen verschachtelter Direktiven.

Ich habe drei Direktiven, Notizen, Notizen und Tagger (neue Elemente mit den gleichen Namen definieren). Jeder von ihnen verwendet einen isolierten Bereich.

Die Notes-Direktive verwendet ng-repeat, um jede ihrer Noten mit dem Notenelement zu "rendern".

Die Note-Direktive verwendet das Tagger-Element, um die Liste der Tags zu "rendern".

Die Notiz Direktive definiert den Geltungsbereich: {getNote: "&", ...}, um eine Noteninstanz aus der Liste der Noten an die Notensteuerung/Direktive zu übergeben. Die getNote (index) -Funktion wird in der Link-Funktion der Noten-Anweisung aufgerufen. Das funktioniert gut!

Die Tagger-Direktive definiert den Geltungsbereich: {getTags: "&", ...}, um eine Liste von Tags für eine bestimmte Notiz an den Tagger-Controller/Direktive zu übergeben. Die getTags-Funktion wird in der Link-Funktion der Tagger-Direktive aufgerufen. Das funktioniert nicht!

Wie ich es verstehe, ist das Problem, dass die Link-Funktionen der Direktiven in einer inkonsistenten Reihenfolge aufgerufen werden. Debuggen der Anwendung zeigt, dass die Verbindung funktioniert in der folgenden Reihenfolge aufgerufen werden:

1. Link-Funktion in den Anmerkungen Richtlinie (Hinzufügen der GetNote Funktion auf den Umfang Anmerkungen)

2. Link-Funktion in der Tagger Richtlinie von der ersten Note Funktion

3. Link-Funktion in der ersten Note Richtlinie (Addition den getTags auf den Umfang) (Aufruf GetNote (getTags in dem übergeordneten Notiz Umfang Aufruf) in dem übergeordneten Notizen scope)

4. Link-Funktion in der Tagger Richtlinie des zweiten Note (Aufruf getTags in dem übergeordneten Anmerkung scope) Funktion

5. Link-Funktion in der zweiten Note Richtlinie (Addition des getTags zu der Umfang) (GetNote in den übergeordneten Aufruf merkt Umfang)

Dies wird da in # 2 der Umfang der ersten Note eine getTags Funktion noch nicht nicht funktioniert hat.

Ein einfaches Beispiel kann in Plunker gefunden werden.

Meine Frage läuft daher auf: Was bestimmt die Reihenfolge, in der Link-Funktionen in verschachtelten Direktiven aufgerufen werden.

(Ich löste das Problem mit $ watch auf getTags in der Tagger-Direktive ...)

Bezug

Answer 1

Zitiert Josh D. Miller, der auf eine ähnliche Frage freundlich geantwortet hatte ich hatte:

"Nur ein paar technische Hinweise Angenommen, Sie haben diese Auszeichnung.

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

Jetzt AngularJS wird erstellen die Richtlinien durch die Richtlinie Funktionen in einer bestimmten Reihenfolge ausgeführt werden:

Richtlinie1: kompilieren

Richtlinie2: kompilieren

Richtlinie1: controller

Richtlinie1: pre-link

Richtlinie2: controller

Richtlinie2: pre-link

Richtlinie2: post-link

Richtlinie1: post-link

nicht, so dass Ihr äußere Richtlinie1 des Link-Funktion wird standardmäßig ein gerade "Link" -Funktion ein post-Link ist renne, bis die Link-Funktion von inner directive2 gelaufen ist. Deshalb sagen wir, dass es nur sicher ist, DOM-Manipulation in der Post-Link zu machen. "

Answer 2

Auf einem einzelnes Elemente von der Reihenfolge der Funktionen Compilieren die wiederum geordnet nach der priority Eigenschaft des Richtliniendefinitionsobjekts bestimmt die Reihenfolge der Verknüpfung von Funktionen ist.

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

auf mehrere Elemente mit Einbindung: die inneren Richtlinien vor äußeren Richtlinien ausgewertet werden. Grund: Art der Transkription.

Auf mehreren Elementen mit Geschwister: In Reihenfolge von oben nach unten ausgeführt. Grund: Parsing-Logik von $ compile.