将动态方法传递给角度中的自定义指令

Question

我正在创建自定义指令，我需要在对象内分配函数，该函数将在传递给我的指令时使用。但是，如果我通过直接在模板内写入函数名称来传递方法，则其工作正常。但是，如果我将该方法引用分配给我的对象属性之一，然后我在模板中使用它来将其传递给指令，但这不起作用。

你可以在这里看到—— jsfiddle

可以在控制台看到。单击“保存”按钮，它将调用指令内的保存函数，但从那里我调用的控制器方法不起作用。但是如果你写函数名 blabla 反而 dynamicMethods.myMethod 然后它会调用，但我在警报内未定义。

谢谢。

Answer 1

你几乎是对的。

第一个错误是当你定义时 dynamicMethods 您引用的对象 $scope.blabla 那时还不存在。

第二个错误是当你将值传递给 accept 绑定到父作用域的函数调用，您需要将其传递为：

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

在哪里 msg 是一个名为的局部变量，可以在表达式值中使用 accept 自定义指令调用上的属性 <editkeyvalue accept="dynamicMethods.myMethod(msg)" ...

我已经更新了 你的小提琴 因此。

当你写的时候 accept: "&" 你告诉角度

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”，我们将它作为一个简单的对象传递，其中 key 表示变量名称 {msg: "from dir"}.

Angular 将查看表达式（字符串）进行评估并发现 msg 位于括号内，因此它看起来像一个参数，其值可以在 locals 目的。

当调用实际函数时，角度将转换 locals 对象到常规数组 - 保留从表达式读取的参数顺序并以类似于以下方式调用函数：

var locals = {msg: "from dir"};
var targetFn = dynamicMethods.myMethod;
var context = dynamicMethods;
targetFn.apply(context, ["from dir"]);

希望这有助于理解正在发生的事情。