AngularJS: how do I capture $event object in a custom directive?

Question

I have a function that requires the $event obj to be passed into as a parameter. The function works just fine when I call it using ng-click. However, now I am told to change the function into a custom directive. But now I don't know how to access the $event object every time the element containing the custom directive gets clicked. Any suggestions? I have this so far but console logging is giving me undefined.

(function () {
        angular.module(APPNAME)
            .directive('clickTracker', clickTracker);

        function clickTracker() {
            return {
                scope: true,
                link: function (scope, element, attrs) {
                    element.bind('click', function () {
                        var mouseEvent = scope.$eval(scope.$event);
                        console.log(mouseEvent);
                    }
                }  
            }
        }
   })()

score 0 · Answer 1 · answered Jul 04 '16 at 00:13

event is first argument of a jQlite event handler callback ... the same as with jQuery

element.bind('click', function (evt) {
      var mouseEvent = scope.$eval(evt);
      console.log(mouseEvent);
}

As for this being custom directive you can still use ng-click and assign the scope function in directive

AngularJS: how do I capture $event object in a custom directive?

1 Answers1