Übergabe dynamischer Methoden an eine benutzerdefinierte Direktive in Angular

Question

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.

Answer 1

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

1. verwenden $parse Dienst zum Parsen von Ausdrücken (dynamicMethods.myMethod(msg))
2. „binden“ (durch Javascript-Schließung) $scope der von Schritt 1 zurückgegebenen Funktion in den ursprünglichen Bereich (in Ihrem Fall den Controller-Bereich)
3. 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.