passing $event to ng-click but event is undefined

Question

In my controller, upon a click event, I add a directive to the page, which is going to be able to call controllerFunc

$scope.addDirective = function(e, instance){
   $scope.instance = instance;
   $(e.currentTarget.parentElement).append($compile('<my-directive myfunc="controllerFunc($event)" mydata={{instance}}/>')($scope));
}

In my directive, I set it up so that controllerFunc gets called on a click event (via myfunc: &), and I try to pass the click event via $event

app.directive('myDirective',function(){
        return {
         restrict: 'AE',
         scope: {
           mydata: '@',
           myfunc: "&"

         },
         template: '<div class="row"><div class="col-4" ng-click="myfunc($event)"></div></div>',
         link: function(scope, elem, attrs){
             //ommitted

         }

        }
}

When I click the relevant div, controllerFunc gets called in the controller but the event is said to be undefined.

 $scope.controllerFunc = function(e){
       //called on the click event but e is undefined
 }

Is there a way to pass the event with ng-click in this situation (i.e. where I've added a template to the dom with an ng-click event? It seems like it should work (since the click event triggers the function) but there's no event in controllerFunc

Answer 1

There is, inside of your controller function, note the name of the argument

'<my-directive myfunc="controllerFunc($event)" mydata={{instance}}/>')($scope));

It's currently "$event", this isn't a function that uses the $event keyword, it's just a function that has an argument, and you have to provide it. I would change $event to event for clarity.

Now, after you've done that, you can go to your directive, and in the template for your directive, you're setting the ng-click param like so

template: '<div class="row"><div class="col-4" ng-click="myfunc($event)"></div></div>',

That ng-click is going to invoke the & function, but in order to bind it to the proper parameter, you have to use slightly different syntax, and match the name of the param it's supposed to match, so

ng-click="myfunc($event)"

becomes

ng-click="myfunc({event: $event})"

That's assuming you've changed the original $event to event.

Answer 2

I don't know about div element, but if you are executing ng-click against an anchor () element, you may be experiencing this issue. To prevent it, you should set its onclick property with event.preventDefault() lick this:

<a href="#" onclick="event.preventDefault()" ng-click="Cancel($event)">Cancel</a>

This will prevent the navigation to the link before ng-click gets a chance to execute.

Thank you.