ng-click for directive

Use `ng-click` attribute in a custom directive.

HTML

<div ng-app="app">
  <div ng-controller="FooController">
    <p><foo ng-click="onClick(ev)">Click me 1</foo></p>
    <p><bar>Click me 2</bar></p>
  </div>
</div>

CSS

.toggle {
  background-color: red;
}

JavaScript

angular.module('app', [])
  .controller('FooController', ['$scope', function($scope) {
    $scope.onClick = function($event) {
      console.log($event.currentTarget)
      var elem = angular.element($event.currentTarget)
      elem.toggleClass('toggle')
    }
  }])
  .directive('foo', function() {
    return {
      scope: {
        ngClick: '&',
      },
      link: function(_scope, element, _attrs, _ctrl, _transclude) {
        element.removeAttr('ng-click')
        element.off('click')
      },
      restrict: 'AE',
      transclude: true,
      template: ('FOO[' +
                 '<a href="#" ng-click="ngClick({ev: $event})" ng-transclude>' +
                 '</a>' +
                 ']'),
    }
  })
  .directive('bar', function($compile) {
    return {
      restrict: 'AE',
      transclude: true,
      template: ('BAR[' +
                 '<a href="#" ng-click="onClick($event)" ng-transclude>' +
                 '</a>' +
                 ']'),
    }
  })