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

您还没有完全正确设置绑定.您可以通过键值映射将指令中的参数传递回父控制器.根据角度文档(强调我的):

&或&attr- 提供在父作用域的上下文中执行表达式的方法.如果未指定attr名称,则假定属性名称与本地名称相同.给定<widget my-attr="count = count + value">和窗口小部件定义scope: { localFn:'&myAttr'},然后隔离范围属性localFn将指向count = count + value表达式的函数包装器.通常需要通过表达式将数据从隔离范围传递到父范围,这可以通过将局部变量名称和值的映射传递到表达式包装器fn来完成.例如,如果表达式是,increment(amount)那么我们可以通过调用localFnas 来指定金额值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>'

,