Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

passing $event to ng-click but event is undefined

Tags:

angularjs

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

like image 990
Leahcim Avatar asked May 15 '15 21:05

Leahcim


People also ask

Can we put condition in NG-click?

We can add ng-click event conditionally without using disabled class.

What is $event in Angular?

The $event object often contains information the method needs, such as a user's name or an image URL. The target event determines the shape of the $event object. If the target event is a native DOM element event, then $event is a DOM event object, with properties such as target and target.

Can we use NG-click and Onclick together?

For a single btn, it's ok to use ng-click or onclick in the ng-app . There is no difference between the two functions. For effective team work, you,d better to have an account with each other. In Angular apps, ng-click is recommended.


2 Answers

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.

like image 151
domitall Avatar answered Oct 15 '22 00:10

domitall


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.

like image 24
GuruKay Avatar answered Oct 15 '22 02:10

GuruKay