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

try this ng-click="myfunc( { $event: $event} ). it should work. — jad-panda
– jad-panda, Commented May 15, 2015 at 21:36

domitall · Accepted Answer · 2015-05-15 21:37:35Z

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.

GuruKay · Accepted Answer · 2016-01-30 06:09:15Z

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.

answered Jan 30, 2016 at 6:09

GuruKay

3,6432 gold badges22 silver badges8 bronze badges

4 Comments

Disfigure Over a year ago

Better to preventDefault() in the controller, it makes the dom clearer and the maintainable code if your template change.

Disfigure Over a year ago

cancel($event) in the view, $event.preventDefault() or return false in the code function

GuruKay Over a year ago

I don't understand, perhaps a code snippet will help. Thank you.

Matti Over a year ago

I think making the controller function return false is the cleanest solution if you are not going to use the event, no need to pass the event just to call preventDefault on it.

Collectives™ on Stack Overflow

passing $event to ng-click but event is undefined

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related