title: AngularJS : Calling controller events from directives
body: <p>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.</p>
  
  <p>What would be a recommended way to set up such attribute in the directive to avoid unnecessary overhead, like two-way binding?</p>
  
  <p>So far I was only able to achieve this by using two-way binding as shown in the example below:</p>
  
  <pre><code>app.controller("testCtrl", function ($scope) {
      $scope.onClickEvent = function (ctrlDown) {
          alert(ctrlDown);
      }
  });
  
  app.directive("customInput", function () {
      return {
          restrict: "E",
          scope: {
              onClickNotify: "=onClick",
          },
          template: "&lt;input type='text' ng-click='onClick()' /&gt;",
          replace: true,
          transclude: false,
          link: function (scope, element, attrs, controller) {
              scope.onClick = function () {
                  if (typeof (scope.onClickNotify) == 'function') {
                      scope.onClickNotify(window.event.ctrlKey);
                  }
              }
          }
      }
  });
  
  &lt;custom-input on-click="onClickEvent" /&gt;
  </code></pre>
  
  <p>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 "&amp;"? According to AngularJS documentation, we should be able to, while passing parameters with names, i.e. like this: </p>
  
  <pre><code>scope.onClickNotify({ctrlDown: window.event.ctrlKey});
  </code></pre>
  
  <p>But it just doesn't work. And if I try and specify parameters in the event name like this:</p>
  
  <pre><code>&lt;custom-input on-click="onClickEvent(ctrlDown)" /&gt;
  </code></pre>
  
  <p>then it still doesn't work. Instead, the value I pass in the directive is ignored.</p>
  
  <p>I'm confused as to what is really going on in the background and why doesn't it work with "&amp;" 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 "@").</p>
  
  <p>And if I'm doing something wrong here, then what is the right way?</p>