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

您尚未正确设置绑定。您可以通过键值映射将指令中的参数传递回父控制器。根据{{3}}（强调我的）：

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

，

Answer 2

据我说你应该这样做：

在您的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});
    }   
}

但我并不感谢你的问题。

Angular：使用＆amp;绑定回调函数和传入参数

2 个答案: