Can't call angular ng-click from jQuery

Question

Im trying to call ng-click from jQuery but cant get it work. Can someone tell me how to do it properly?

HTML:

<a ng-click="changeData()">Testing</a>
<a ng-click="changeData()">Testing 2</a>
<a ng-click="changeData()">Testing 3</a>

jQuery:

$(document).keydown(function(e){
    if (checkNav && checkNav()) return;
    if (e.keyCode == 37) {
        // left
        setCurrent(x,y-1);
        e.preventDefault();
    } else if (e.keyCode == 38) {
        // up
        setCurrent(x-1,y);
        e.preventDefault();
    } else if (e.keyCode == 39) {
        // right
        setCurrent(x,y+1);
        e.preventDefault();
    } else if (e.keyCode == 40) {
        // down
        setCurrent(x+1,y);
        e.preventDefault();
    } else if (e.keyCode == 13) {

        $('a[ng-click="changeData()"]')

    }
});

I want it to call same function as ng-click when clicking enter. It works fine if I have the following code for hrefs when clicking enter:

} else if (e.keyCode == 13) {
                window.location = current.attr('href');
                e.preventDefault();
            }

Thanks!

Thanks for the reply! I tried but couldnt get it to work. Basically when I click "enter" key, I want the same function to be triggered that's being triggered by ng-click. Do you have some idea what to do perhaps? — Angelo
– Angelo, Commented Jul 8, 2015 at 22:01
maybe add a scope function and ng-keydown="keyDown($event)" .. the function would look like this $scope.keyDown = function(e) { if(e.keyCode === 13) {e.preventDefault(); $scope.changeData(); } }); — Betty St
– Betty St, Commented Jul 8, 2015 at 22:15
Thanks for the reply! I need it for an experimental feature. I tried with ng-click="changeData()" but it didn't work either. I didnt get any error in the console either, strange. — Angelo
– Angelo, Commented Jul 8, 2015 at 22:35

1252748 · Accepted Answer · 2015-07-08 22:21:39Z

1

I think you mean you want something like this. Let me know if this is your intent or not:

index.html

<input ng-keyup="keyFn(event=$event)" ngclick="clickFn()">click</input>

controller.js

angular.module('myApp')
    .controller('myCtrl', function($scope) {

        $scope.keyFn = function(event){
          if (event.keyCode && event.keyCode === 13/*enter key*/){
              someFunction();
          }
        };
        $scope.clickFn = function(){
            someFunction();
        }
    });

function someFunction(){
    console.log("event fired");
    //functionality shared between click and `enter` keypress
}

answered Jul 8, 2015 at 22:21

1252748

15.5k35 gold badges118 silver badges244 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Angelo Over a year ago

Is there a way to do this on something else than input field? Like button or href when its focused? Right now it works fine on input field but not something else. Thanks!

Jan Over a year ago

ng-focus="clickFn()"

Angelo Over a year ago

Thanks Jan! However, when I click on "tab", the focus doesnt change to the input submit. Do you happen to know how I can achieve this?

Jan Over a year ago

These are all things you could have found yourself with a quick google search. F.e "angular bind focus" and "angular trigger focus"

Jan · Accepted Answer · 2015-07-08 22:26:19Z

0

$('a[ng-click="changeData()"]') just fetches the element. If you want to trigger a click you need to call .click() like so

$('a[ng-click="changeData()"]').click();

But I prefer thomas' answer that doesn't use jQuery at all, I don't see why you'd need it. Seems completely unnecessary for this.

answered Jul 8, 2015 at 22:26

Jan

5,8573 gold badges29 silver badges44 bronze badges

1 Comment

Angelo Over a year ago

Thanks for the reply! I need it for an experimental feature. I tried with ng-click="changeData()" but it didn't work either. I didnt get any error in the console either, strange.

Collectives™ on Stack Overflow

Can't call angular ng-click from jQuery

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related