動的メソッドを角度のカスタムディレクティブに渡す
-
21-12-2019 - |
質問
ディレクティブに渡すときに使用されるオブジェクト内に関数を割り当てる必要があるカスタムディレクティブを作成しています。ただし、テンプレート内に関数の名前を直接書いてメソッドを渡すと、正常に機能します。しかし、そのメソッド参照をオブジェクトプロパティの1つに割り当て、それをテンプレートで使用してディレクティブに渡している場合、それは機能しません。
ここで見ることができます - jsフィドル
コンソールで見ることができます。「保存」ボタンをクリックすると、ディレクティブ内の保存関数が呼び出されますが、そこからコントローラーメソッドを呼び出していますが、機能していません。ただし、関数名を書くと blabla
その代わり dynamicMethods.myMethod
その後、呼び出されますが、その中で未定義の内部アラートが発生しました。
ありがとう。
解決
ほぼ正解でした。
最初の間違いは定義したときでした dynamicMethods
参照しているオブジェクト $scope.blabla
それはまだ存在していませんでした。
2 番目の間違いは、値を accept
親スコープにバインドした関数呼び出しは、次のように渡す必要があります。
$scope.accept({msg: "from dir"})
どこ msg
という名前のローカル変数で、次の式の値で使用できます。 accept
カスタム ディレクティブ呼び出しの属性 <editkeyvalue accept="dynamicMethods.myMethod(msg)" ...
更新しました あなたのフィドル それに応じて。
書くとき accept: "&"
あなたはangularに伝えています
- 使用
$parse
式を解析するサービス (dynamicMethods.myMethod(msg)
) - 「バインド」( JavaScriptクロージャ)
$scope
ステップ 1 から元のスコープ (あなたの場合はコントローラーのスコープ) に返された関数 - 内部に関数を格納します
accept
ディレクティブのローカル スコープのプロパティ。
ここでコンテンツを検査すると、 $scope.accept
ディレクティブで呼び出す直前に、次のようになります。
function (locals) {
return parentGet(parentScope, locals);
}
どこ locals
から返された関数の評価に到達したときに使用されるローカル変数を持つオブジェクトです。 $parse
. 。JavaScript には名前付きパラメータがなく、値がローカル変数であることを何らかの方法で指定したくないため、 msg
「from dir」は、キーが変数名を示す単純なオブジェクトとして渡します {msg: "from dir"}
.
Angular は式 (文字列) を調べて評価し、それを見つけます。 msg
は括弧内にあるため、パラメータのように見えます。値は次の場所にあります。 locals
物体。
実際の関数を呼び出すときが来ると、angular が変換されます。 locals
オブジェクトを通常の配列に変換 - 式から読み取ったパラメータの順序を保持し、次のような方法で関数を呼び出します。
var locals = {msg: "from dir"};
var targetFn = dynamicMethods.myMethod;
var context = dynamicMethods;
targetFn.apply(context, ["from dir"]);
何が起こっているのかを理解するのに少しでも役立つことを願っています。