Angular: 使用 & 和传入参数绑定回调函数

Question

我有一个（简化的）指令

angular.module('myApp')
   .directive('myButton', function () {
        return {
            restrict: 'E',
            scope: {
                callbackFn: '&'
            },
            template: '<button ng-click=ca;;backFn($evenb)'
        }
   });

现在，我在一些父控制器中定义了一个回调函数：

this.myCallback = function ($event) {
    this.doIt($event);
}

和 HTML:

<my-button callback-fn="page.myCallback()"></my-button>

（我正在使用 bindToController 和 controllerAs 之类的东西）

问题是 $event 从未传递给 myCallback，这很可能与我绑定此函数的方式有关 (&)。但另一方面，在 myCallback 里面我想使用 this.

有什么办法可以解决这个问题吗？不做像

这样的事情

var self = this;
this.myCallback = function ($event) {
     self.doIt($event);
}

Answer 1

根据我的说法，您应该这样做：

在您的 HTML 页面中：

<my-button callback-fn="page.myCallback(event)"></my-button>

在你的指令中：

angular.module('myApp')
    .directive('myButton', function () {
        return {
            restrict: 'E',
            controller: 'Controller',
            bindToController: true,
            scope: {
                callbackFn: '&'
            },
            template: '<button ng-click=foo($event)'
        }
});

function Controller() {
    this.foo = function (event) {
        this.callbackFn({event: event});
    }   
}

但我不明白你的问题是什么意思。

Answer 2

您还没有完全正确地设置您的绑定。您可以通过键值映射将参数从指令传回父控制器。根据 angular docs（强调我的）：

& or &attr - provides a way to execute an expression in the context of the parent scope. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given <widget my-attr="count = count + value"> and widget definition of scope: { localFn:'&myAttr'}, then isolate scope property localFn will point to a function wrapper for the count = count + value expression. Often it's desirable to pass data from the isolated scope via an expression to the parent scope, this can be done by passing a map of local variable names and values into the expression wrapper fn. For example, if the expression is increment(amount) then we can specify the amount value by calling the localFn as localFn({amount: 22}).

所以这意味着在你的消费中HTML你需要添加参数：

<my-button callback-fn="page.myCallback(parentEvent)"></my-button>

然后在指令中：

......
restrict: 'E',
scope: {
            callbackFn: '&'
       },
template: '<button ng-click="ctrl.callbackFn({parentEvent: $event})">Callback</button>'

、

Angular: 使用 & 和传入参数绑定回调函数

Angular: Bind callback function using & and pass-in arguments

data-binding

directive

angularjs