angular.module('myModule', [])

.controller('myCtrl', ['$scope', function ($scope) {

  $scope.display = function (arg, event) {

    console.log(event, arg); 

  };

}])

.directive('myNgClick', ['$parse', function ($parse) {

  return {

    link: function (scope, elt, attr) {

      /*

       Gets the function you have passed to ng-click directive

       Parse returns a function which has a context and extra params which

       overrides the context

      */

      var handler = $parse(attr['myNgClick']);

​

      /*

      here you bind on click event you can look at the documentation

      https://docs.angularjs.org/api/ng/function/angular.element

      */

      elt.on('click', function (event) {

​

        //callback is here for the explanation

        var callback = function () {

​

          /*

           Here handler will do the following, it will call the dedicated

           function and fill the arguments with the elements found in the scope

           (if possible), the second argument will override the $event attribute

           in the scope (if there is some) and provide the event element of the

           click

          */

          handler(scope, {$event: event});

        };

​

        //$apply force angular to run a digest cycle in order to propagate the

        //changes

        scope.$apply(callback);

      });

    }

  };

}]);