Events AngularJS：从指令调用控制器事件

假设您需要编写一个指令，该指令接受一个属性参数—控制器事件函数的名称。该指令执行一些处理，然后对该事件处理程序发出通知，并向其传递一些处理参数

为避免不必要的开销（如双向绑定），建议在指令中设置此类属性的方法是什么

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

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" />

但它就是不起作用。如果我尝试在事件名称中指定如下参数：

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

那它还是不起作用。相反，我在指令中传递的值被忽略

我不明白背景中到底发生了什么，为什么它不能像预期的那样与“&”一起工作？在这种情况下，双向绑定对我来说确实是一种开销，因为我们只是在一个方向上传递函数名，如果不是作为一个简单属性（带“@”）传递的话

---

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

我使用

&

让它工作起来。你是对的。创建双向绑定是一项开销

实际上，您应该在调用控制器方法时传递一个对象：

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

app.directive（“customInput”），函数（$timeout）{
返回{
限制：“E”，
范围：{
onClickNotify:“&onClick”，
},
模板：“”，
替换：正确，
排除：错误，
链接：功能（范围、元素、属性、控制器）{
scope.onClick=函数（）{
if（typeof（scope.onClickNotify）==“函数”）{
onClickNotify（{ctrlDown:“foo”}）；
}
}
}
}
});

HTML:

我只是在一个简单的例子中做了同样的事情，它突然奏效了。现在我真的很困惑。我们将努力缩小分歧。尽管如此，我还是欢迎任何关于将事件处理程序传递到指令的推荐方法的建议。是的，这是应该的。我可能第一次错过了一些东西，但现在对于任何新手来说，当谈到AngularJS中的事件处理程序时，这是一个很好的指南；）

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

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