events - Angular : Calling controller events from directives

Question

假设您需要编写一个带有一个属性参数的指令 - Controller 事件函数的名称。该指令执行一些处理，然后在该事件处理程序上触发通知，并向其传递一些处理参数。

在指令中设置此类属性以避免不必要的开销(如双向绑定(bind))的推荐方法是什么？

到目前为止，我只能通过使用双向绑定(bind)来实现这一点，如下例所示:

app.controller("testCtrl", function ($scope) {
    $scope.onClickEvent = function (ctrlDown) {
        alert(ctrlDown);
    }
});

app.directive("customInput", function () {
    return {
        restrict: "E",
        scope: {
            onClickNotify: "=onClick",
        },
        template: "<input type='text' ng-click='onClick()' />",
        replace: true,
        transclude: false,
        link: function (scope, element, attrs, controller) {
            scope.onClick = function () {
                if (typeof (scope.onClickNotify) == 'function') {
                    scope.onClickNotify(window.event.ctrlKey);
                }
            }
        }
    }
});

<custom-input on-click="onClickEvent" />

在上面的示例中，指令使用“=” - 属性的双向绑定(bind)，这是我能够使其工作的唯一方法。我不明白的是为什么我们不能使用“&”？根据 AngularJS 文档，我们应该能够在传递带有名称的参数时，即像这样:

scope.onClickNotify({ctrlDown: window.event.ctrlKey});

但这根本行不通。如果我尝试像这样在事件名称中指定参数:

<custom-input on-click="onClickEvent(ctrlDown)" />

然后还是不行。相反，我在指令中传递的值将被忽略。

我对后台真正发生的事情感到困惑，为什么它不能像预期的那样与“&”一起工作？在这种情况下，双向绑定(bind)对我来说确实看起来像是一种开销，因为我们只是在一个方向上传递函数名称，如果不是作为一个简单的属性(带有“@”)的话。

如果我在这里做错了什么，那么正确的方法是什么？

Answer 1

我使用 & 让它工作。你是对的。创建双向绑定(bind)是一种开销。

实际上你应该在调用 Controller 方法时传递一个对象:

app.directive("customInput", function ($timeout) {
    return {
        restrict: "E",
        scope: {
            onClickNotify: "&onClick",
        },
        template: "<input type='text' ng-click='onClick()' />",
        replace: true,
        transclude: false,          
        link: function (scope, element, attrs, controller) {
            scope.onClick = function () {
                if (typeof (scope.onClickNotify) == 'function') {
                    scope.onClickNotify({ctrlDown:"foo"});
                }
            }
        }
    }
});

HTML:

<custom-input on-click="onClickEvent(ctrlDown)" />