Übergabe dynamischer Methoden an eine benutzerdefinierte Direktive in Angular
-
21-12-2019 - |
Frage
Ich erstelle eine benutzerdefinierte Direktive, in der ich dem Objekt eine Funktion zuweisen muss, die bei der Übergabe an meine Direktive verwendet wird.Wenn ich jedoch die Methode übergebe, indem ich direkt den Namen der Funktion in die Vorlage schreibe, funktioniert sie einwandfrei.Aber wenn ich diesen Methodenverweis einer meiner Objekteigenschaften zuweise und ihn dann in meiner Vorlage verwende, um ihn an die Direktive zu übergeben, funktioniert das nicht.
Sie können hier sehen - jsfiddle
Sie können es in der Konsole sehen.Klicken Sie auf die Schaltfläche „Speichern“. Die Speicherfunktion wird innerhalb der Direktive aufgerufen, aber von dort aus rufe ich die Controller-Methode auf, die nicht funktioniert.Aber wenn Sie den Funktionsnamen schreiben blabla
stattdessen dynamicMethods.myMethod
dann wird es anrufen, aber dadurch habe ich eine undefinierte interne Warnung erhalten.
Danke schön.
Lösung
Du hattest es fast richtig.
Der erste Fehler war bei der Definition dynamicMethods
Objekt, auf das Sie verweisen $scope.blabla
was es noch nicht gab.
Der zweite Fehler war, als Sie Werte an übergeben haben accept
Um einen Funktionsaufruf zu erhalten, den Sie an den übergeordneten Bereich gebunden haben, müssen Sie ihn wie folgt übergeben:
$scope.accept({msg: "from dir"})
Wo msg
ist eine lokale Variable mit dem Namen, die im Ausdruckswert von verwendet werden kann accept
Attribut für Ihren benutzerdefinierten Direktivenaufruf <editkeyvalue accept="dynamicMethods.myMethod(msg)" ...
Ich habe aktualisiert deine Geige entsprechend.
Wenn du schreibst accept: "&"
Du sagst es eckig
- verwenden
$parse
Dienst zum Parsen von Ausdrücken (dynamicMethods.myMethod(msg)
) - „binden“ (durch Javascript-Schließung)
$scope
der von Schritt 1 zurückgegebenen Funktion in den ursprünglichen Bereich (in Ihrem Fall den Controller-Bereich) - Speichern Sie die Funktion darin
accept
Eigentum Ihres lokalen Gültigkeitsbereichs.
Wenn Sie sich nun den Inhalt ansehen $scope.accept
Kurz bevor Sie es in der Direktive aufrufen, werden Sie etwas Ähnliches sehen:
function (locals) {
return parentGet(parentScope, locals);
}
Wo locals
ist ein Objekt mit lokalen Variablen, das bei der Auswertung der zurückgegebenen Funktion verwendet wird $parse
.Da es in Javascript keine benannten Parameter gibt und wir nicht irgendwie darauf hinweisen möchten, dass der Wert eine lokale Variable ist msg
ist „aus dir“, wir übergeben es als einfaches Objekt, wobei der Schlüssel den Variablennamen angibt {msg: "from dir"}
.
Angular schaut sich den Ausdruck (eine Zeichenfolge) an, um ihn auszuwerten und zu finden msg
steht in Klammern und sieht daher wie ein Parameter aus, in dem der Wert zu finden ist locals
Objekt.
Wenn es an der Zeit ist, die eigentliche Funktion anzurufen, wird die Winkelkonvertierung durchgeführt locals
Objekt in reguläres Array – unter Beibehaltung der Reihenfolge der aus dem Ausdruck gelesenen Parameter und Aufruf der Funktion auf ähnliche Weise wie:
var locals = {msg: "from dir"};
var targetFn = dynamicMethods.myMethod;
var context = dynamicMethods;
targetFn.apply(context, ["from dir"]);
Ich hoffe, das hilft ein wenig beim Verständnis, was los ist.