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

Question

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

你可以在这里看到 - jsfiddle

您可以在控制台中看到。点击保存按钮，它会调用指令中的保存功能，但从那里我调用的控制器方法不起作用。但是如果你编写函数名blabla而不是dynamicMethods.myMethod那么它会调用但是我在内部警报中未定义。

谢谢。

Answer 1

你几乎没错。

第一个错误是您定义了dynamicMethods您引用$scope.blabla但尚未存在的对象。

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

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

其中msg是一个名为的局部变量，可以在自定义指令调用accept的{​​{1}}属性的表达式值中使用

我已相应更新your fiddle。

当你写<editkeyvalue accept="dynamicMethods.myMethod(msg)" ...时，你正在告诉

1. 使用$parse服务来解析表达式（accept: "&"）
2. ＆＃34;结合＆＃34; （通过javascript closure）dynamicMethods.myMethod(msg)从步骤1返回到原始范围的函数（在您的情况下，控制器的范围）
3. 将函数存储在指令本地作用域的$scope属性中。

现在，如果你在指令中调用accept之前的内容，那么你会发现类似的内容：

$scope.accept

其中function (locals) { return parentGet(parentScope, locals); } 是一个对象，当我们到达locals返回的函数评估时使用局部变量。由于javascript中没有命名参数，我们不能以某种方式指出值局部变量$parse是＆＃34;来自dir＆＃34;我们将它作为一个简单的对象传递，其中key表示变量名msg。

Angular将查看要评估的表达式（字符串），并发现{msg: "from dir"}在括号内，因此它看起来像一个参数，该值可以在msg对象中找到。

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

locals

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