AngularJS : Calling controller events from directives - events

Question

Suppose you need to write a directive that takes one attribute-parameter - name of the controller's event function. The directive does some processing and then fires a notification on that event handler, passing it some processing parameters.
What would be a recommended way to set up such attribute in the directive to avoid unnecessary overhead, like two-way binding?
So far I was only able to achieve this by using two-way binding as shown in the example below:
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" />
In the example above the directive uses "=" - bi-directional binding for the attribute, the only way I was able to make it work. What I cannot understand is why can't we use "&"? According to AngularJS documentation, we should be able to, while passing parameters with names, i.e. like this:
scope.onClickNotify({ctrlDown: window.event.ctrlKey});
But it just doesn't work. And if I try and specify parameters in the event name like this:
<custom-input on-click="onClickEvent(ctrlDown)" />
then it still doesn't work. Instead, the value I pass in the directive is ignored.
I'm confused as to what is really going on in the background and why doesn't it work with "&" as expected? Two-way binding does look like an overhead to me in this scenario, because we are just passing the function name in one direction, if not as a simple attribute (with "#").
And if I'm doing something wrong here, then what is the right way?

Answer 1

I got it working using &. You are right. Creating a two-way binding is an overhead.
Actually you 're supposed to pass an object while calling the controller method:
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)" />