AngularJS指令表达式与带有参数的“&”函数绑定[重复]答案

【问题标题】：AngularJS Directive expression binding with `"&"` function with parameters [duplicate]AngularJS指令表达式与带有参数的“&”函数绑定[重复]
【发布时间】：2019-07-31 12:44:06
【问题描述】：

我正在开发一个多选指令，类似于 AngularJs 的 isteven 指令。我无法解决的是我想包含回调函数，可以传递参数，在控制器中达到它们各自的功能。为此，请使用“&”运算符，但例如，如果我想在控制台中看到一个对象，则只显示“未定义”。

我举个例子：

模板 Html：

<li ng-repeat="data in inputData">
      <span ng-click="onItemClick()">{{data.name}}</span>
</li>

JS（指令）：

debFrontApp.directive('debSelect', function () {
    return {
      restrict: "AE",
      transclude: true,
      templateUrl: function (element, attrs) {
        if(!attrs.basePath){
          attrs.basePath = "/assets/debfront";
        }
        return attrs.basePath + "/templates/debselect.html";
      },
      scope: {
        multiSelect: '=',
        selectName: '@',
        inputData: '=inputData',
        outputData: '=outputData',
        onItemClick: '&'
      }
    };
});

JS（控制器）

$scope.testfuctionBye = function(data){
    console.log(data);
};

这个函数返回一个未定义的值。一些帮助？谢谢！

【问题讨论】：

你在哪里使用指令？你如何传递参数？
如果您在 stackblitz.com 或其他地方创建一些最小的可重现示例，那就太好了。我们会更容易为您提供帮助

标签： javascript angularjs angularjs-directive

【解决方案1】：

使用表达式绑定需要使用本地对象：

<li ng-repeat="data in inputData">
      <span ng-click="onItemClick({$event: data})">{{data.name}}</span>
</li>

用法：

<deb-select on-item-click="vm.onClick($event)" input-data="vm.dataArr">
</deb-select>

调用表达式绑定时，locals 对象定义$event 的值。

来自文档：

& 或 &attr - 提供了一种在父作用域的上下文中执行表达式的方法。如果未指定 attr 名称，则假定属性名称与本地名称相同。给定<my-component my-attr="count = count + value"> 和隔离作用域定义scope: { localFn:'&myAttr' }，隔离作用域属性localFn 将指向count = count + value 表达式的函数包装器。通常希望通过表达式将数据从隔离范围传递到父范围。这可以通过将局部变量名称和值的映射传递到表达式包装器 fn 来完成。例如，如果表达式为increment($amount)，那么我们可以通过将localFn 调用为localFn({$amount: 22}) 来指定金额值。

有关详细信息，请参阅

AngularJS Comprehensive Directive API Reference - scope

【讨论】：