動的メソッドを角度のカスタムディレクティブに渡す

Question

ディレクティブに渡すときに使用されるオブジェクト内に関数を割り当てる必要があるカスタムディレクティブを作成しています。ただし、テンプレート内に関数の名前を直接書いてメソッドを渡すと、正常に機能します。しかし、そのメソッド参照をオブジェクトプロパティの1つに割り当て、それをテンプレートで使用してディレクティブに渡している場合、それは機能しません。

ここで見ることができます - jsフィドル

コンソールで見ることができます。「保存」ボタンをクリックすると、ディレクティブ内の保存関数が呼び出されますが、そこからコントローラーメソッドを呼び出していますが、機能していません。ただし、関数名を書くと blabla その代わり dynamicMethods.myMethod その後、呼び出されますが、その中で未定義の内部アラートが発生しました。

ありがとう。

Answer 1

ほぼ正解でした。

最初の間違いは定義したときでした dynamicMethods 参照しているオブジェクト $scope.blabla それはまだ存在していませんでした。

2 番目の間違いは、値を accept 親スコープにバインドした関数呼び出しは、次のように渡す必要があります。

$scope.accept({msg: "from dir"})

どこ msg という名前のローカル変数で、次の式の値で使用できます。 accept カスタム ディレクティブ呼び出しの属性 <editkeyvalue accept="dynamicMethods.myMethod(msg)" ...

更新しました あなたのフィドル それに応じて。

書くとき accept: "&" あなたはangularに伝えています

1. 使用 $parse 式を解析するサービス (dynamicMethods.myMethod(msg))
2. 「バインド」（ JavaScriptクロージャ) $scope ステップ 1 から元のスコープ (あなたの場合はコントローラーのスコープ) に返された関数
3. 内部に関数を格納します 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"]);

何が起こっているのかを理解するのに少しでも役立つことを願っています。