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

I have a (simplified) directive

我有一个(简化的)指令

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

Now, in some parent controller I have defined a callback function:

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

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

and the HTML:

HTML:

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

(I'm using things like bindToController and controllerAs)

(我用的是bindToController和controllerAs)

The issue is that the $event is never passed to myCallback, which most likely has to do with how I bind this function (&). But on the other hand, inside myCallback I would like to use this.

问题是$事件从未传递给myCallback，这很可能与我如何绑定这个函数(&)有关。但另一方面，在myCallback内部，我想用这个。

Is there some way to fix this ? without doing things like

有什么办法解决这个问题吗?不做这样的事情

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

2 个解决方案

#1

You haven't completely set up your bindings correctly. You can pass back arguments from the directive to the parent controller via a key-value map. According to the angular docs (emphasis mine):

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

& 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}).

提供了一种在父范围内执行表达式的方法。如果没有指定attr名称，则假定属性名称与本地名称相同。给定和scope的widget定义:{localFn:'&myAttr'}，则隔离scope属性localFn将指向count = count + value表达式的函数包装器。通常希望通过表达式将数据从隔离范围传递到父范围，这可以通过将本地变量名称和值映射传递到表达式包装器fn来实现。例如，如果表达式是增量(amount)，那么我们可以通过调用localFn作为localFn来指定amount值({amount: 22})。

So that means in your consuming HTML you need to add parameters:

这意味着在你使用HTML时你需要添加参数:

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

And then in the directive:

然后在指令中:

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

#2

According to me you should do it this way :

根据我的说法，你应该这样做:

In your HTML page :

在您的HTML页面:

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

In your directive :

在你的指令:

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});
    }   
}

But I'm not sur what's the point of your question.

但我不确定你的问题有什么意义。

#1