角度指令能否将参数传递给指令属性中指定的表达式中的函数？

javascript angularjs angularjs-scope angularjs-directive

2022-08-30 02:19:56

我有一个表单指令，它使用具有隔离作用域的指定属性：callback

scope: { callback: '&' }

它位于里面，所以我传入的表达式包含对象的作为回调函数的参数：ng-repeatid

<directive ng-repeat = "item in stuff" callback = "callback(item.id)"/>

当我完成指令时，它从其控制器函数调用。在大多数情况下，这很好，这是我想做的，但有时我想从内部添加另一个参数。$scope.callback()directive

有没有一个角度表达式可以允许这个：，导致被调用？$scope.callback(arg2)callbackarguments = [item.id, arg2]

如果没有，最整洁的方法是什么？

我发现这有效：

<directive 
  ng-repeat = "item in stuff" 
  callback = "callback" 
  callback-arg="item.id"/>

跟

scope { callback: '=', callbackArg: '=' }

和指令调用

$scope.callback.apply(null, [$scope.callbackArg].concat([arg2, arg3]) );

但我不认为它特别整洁，它涉及在隔离范围内放置额外的东西。

有没有更好的方法？

这里的Plunker游乐场（打开控制台）。

答案 1

如果您声明您的回调如@lex82

callback = "callback(item.id, arg2)"

您可以使用对象映射在指令作用域中调用回调方法，它将正确执行绑定。喜欢

scope.callback({arg2:"some value"});

无需$parse。查看我的小提琴（控制台日志）http://jsfiddle.net/k7czc/2/

更新：文档中有一个小例子：

& or &attr - 提供了一种在父作用域的上下文中执行表达式的方法。如果未指定 attr 名称，则假定属性名称与本地名称相同。给定和小部件定义范围：{ localFn：'&myAttr' }，然后隔离范围属性 localFn 将指向 count = count + value 表达式的函数包装器。通常，需要通过表达式将数据从隔离范围传递到父作用域，这可以通过将局部变量名称和值的映射传递到表达式包装器fn中来完成。例如，如果表达式是 increment（amount），那么我们可以通过调用 localFn 作为 localFn（{amount： 22}）。

答案 2

其他答案没有错，但我在指令属性中传递函数时使用以下技术。

在 html 中包含指令时，请省略括号：

<my-directive callback="someFunction" />

然后“解开”指令链接或控制器中的函数。下面是一个示例：

app.directive("myDirective", function() {

    return {
        restrict: "E",
        scope: {
            callback: "&"                              
        },
        template: "<div ng-click='callback(data)'></div>", // call function this way...
        link: function(scope, element, attrs) {
            // unwrap the function
            scope.callback = scope.callback(); 

            scope.data = "data from somewhere";

            element.bind("click",function() {
                scope.$apply(function() {
                    callback(data);                        // ...or this way
                });
            });
        }
    }
}]);

“解包”步骤允许使用更自然的语法调用函数。它还确保该指令即使在嵌套在可能传递该函数的其他指令中也能正常工作。如果您没有进行解包，那么如果您有这样的场景：

<outer-directive callback="someFunction" >
    <middle-directive callback="callback" >
        <inner-directive callback="callback" />
    </middle-directive>
</outer-directive>

然后你最终会在你的内部指令中得到这样的东西：

callback()()()(data);

这在其他嵌套方案中会失败。

我从Dan Wahlin在 http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-3-isolate-scope-and-function-parameters 的一篇优秀文章中改编了这种技术。

我添加了解包步骤，以使调用函数更加自然，并解决我在项目中遇到的嵌套问题。