Ich habe 3 verschachtelte, isolieren Bereich, Richtlinien ( CodePen hier sehen ) und ich kann Übergeben Sie eine Funktion (die ein Argument benötigt) von der äußersten Direktive an die innerste Direktive (die Funktion von der äußeren Direktive an die intermediate Direktive an die innere Direktive übergeben).
Was ich nicht verstehe, ist, was getan werden muss, um das Argument von der inneren Richtlinie zurück durch die Zwischenrichtlinie zurück zur äußeren Richtlinie zu bringen.
Siehe auch das CodePen-Beispiel .
Hinweis: Wenn ich nur 2 isolate scope-Direktiven angegeben habe, kann ich das mit etwas ähnlichem wie dem folgenden anfangen ...
%Vor%Der obige Code gibt mir eine Alarmbox mit 'Henry' (genau wie ich es erwarte).
Wenn ich eine dritte, intermediate isolate scope-Direktive hinzufüge, kommt es zu Problemen ...
%Vor% Dieser Code gibt mir eine Warnung mit undefined ...
Ein weit verbreitetes Missverständnis ist, dass "& ist für die Weitergabe von Funktionen". Dies ist technisch nicht korrekt.
Was & tut, ist eine Funktion für den Direktivenbereich, die beim Aufruf das Ergebnis des ausgewerteten Ausdrucks für den übergeordneten Bereich zurückgibt.
Diese Funktion nimmt ein Objekt als Argument, das lokale Variablen im Ausdruck mit denen aus dem Bereich der Direktiven (das Objekt {name: testName} ) in diesem Fall überschreibt.
Wenn Sie unter die Haube schauen würden, würde die Methode $scope.addName in myDir2 so aussehen (vereinfacht):
Ihre zweite Anweisung funktioniert, weil der Ausdruck, an den sie gebunden ist,
ist %Vor% Dieser Ausdruck hat eine lokale Variable name , die bei der Ausführung mit
Merken - die Funktion addName in myDir2 ist NICHT identisch mit der Funktion addName in myDir1 . Es ist eine neue Funktion, die den Ausdruck
für den übergeordneten Bereich und gibt das Ergebnis zurück.
Wenn Sie diese Logik auf myDir3 anwenden, lautet der ausgewertete Ausdruck:
Beachten Sie, dass die einzige lokale Variable in diesem Ausdruck "testName" ist. Also, wenn Sie myDir3 mit
Es gibt keine lokale Variable name , die überschrieben werden soll, und testName ist nicht definiert.
Puh! Kein Wunder, das verwirrt NUR ÜBER JEDEN!
Wie Sie in Ihrem Beispiel beheben können:
Sie möchten, dass die Ausdrücke zur tatsächlichen Funktion in myDir1 ausgewertet werden.
Hier ist der funktionierende Stift
Schlussbemerkung - Der Grund, warum '&' passender ist als '=' ist hier, dass '=' tatsächlich eine $watch und bidirektional die Variablen zwischen den Direktiven einrichtet. Dies bedeutet, dass myDir2 tatsächlich die Funktion appName in myDir1 ändern kann, was nicht erforderlich und unerwünscht ist. Es erfordert auch die Einrichtung von zwei $watch s, die ich aus Performance-Gründen in Angular vermeiden möchte.
Es gibt zwei Möglichkeiten, eine Funktion in einem isolierten Bereich zu übergeben. Während '& amp;' stellt sicher, dass das, was Sie übergeben, tatsächlich eine Funktion ist, Sie können auch eine Funktion als gebundene Variable mit '=' übergeben und nur bei Bedarf aufrufen. Diese Methode hat Nachteile, aber sie wird die Steuerung des Aufrufs der Komponente überlassen, die für diesen Aufruf verantwortlich ist.
%Vor% Das Problem mit Ihrem Code mit drei verschachtelten Direktiven ist, dass testName nicht im isolierten Bereich von myDir2 existiert. Sie können dies aus myDir3 setzen, aber dafür müssen Sie ein Objekt im Bereich von myDir2 erstellen und seine Eigenschaft auf testName setzen und dann diese Eigenschaft in myDir2
Das Arbeitsbeispiel ist hier Ссылка
Sie können auf einen Elementbereich zugreifen, indem Sie isolateScope()
Ersetzen Sie in der myDir1 -Direktive stattdessen controller anstelle von
Eine andere Möglichkeit besteht darin, $$nextSibling zu benutzen, um den nächsten Bereich nach dem aktuellen Elternteil zu bekommen (habe das nicht wirklich benutzt, also möge es lesen)
Dies ist wahrscheinlich nicht der "eckige Weg", Dinge zu tun. Ich denke, das Entfernen des isolierten Bereichs von den Kind-Direktiven und deren Referenz auf das Modell der Eltern-Direktive wäre ideal.
Tags und Links javascript angularjs