以角度将动态方法传递给自定义指令答案

【问题标题】：Passing dynamic methods to custom directive in angular以角度将动态方法传递给自定义指令
【发布时间】：2014-07-31 10:13:10
【问题描述】：

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

你可以在这里看到 - jsfiddle

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

谢谢。

【问题讨论】：

请把代码粘贴到这里。

标签： angularjs angular-directive

【解决方案1】：

你说得差不多了。

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

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

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

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

我已经相应地更新了your fiddle。

当你写 accept: "&" 时，你是在告诉 Angular

使用$parse服务解析表达式(dynamicMethods.myMethod(msg))
“绑定”（通过javascript closure）$scope 从步骤1返回的函数到原始范围（在您的情况下为控制器的范围）
将函数存储在指令本地范围的accept 属性中。

现在，如果您在指令中调用 $scope.accept 的内容之前检查它，您将类似于：

function (locals) {
  return parentGet(parentScope, locals);
}

其中locals 是一个带有局部变量的对象，当我们达到对从$parse 返回的函数的评估时。由于 javascript 中没有命名参数，我们不想以某种方式指出值局部变量 msg 是“来自 dir”，我们将它作为一个简单的对象传递，其中 key 表示变量名称 {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"]);

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

【讨论】：

谢谢。您能否向我解释一下与自定义指令相关的父子范围。正如在指令中我已经创建了隔离范围，我认为它与范围分开，那么为什么我们需要在对象内部传递 msg。它的工作，但我不明白这背后发生了什么。