How to trigger ngClick programmatically

Question

I want to trigger ng-click of an element at runtime like:

_ele.click();

OR

_ele.trigger('click', function());

How can this be done?

Solution 1

The syntax is the following:

function clickOnUpload() {
  $timeout(function() {
    angular.element('#myselector').triggerHandler('click');
  });
};

// Using Angular Extend
angular.extend($scope, {
  clickOnUpload: clickOnUpload
});

// OR Using scope directly
$scope.clickOnUpload = clickOnUpload;

More info on Angular Extend way here.

If you are using old versions of angular, you should use trigger instead of triggerHandler.

If you need to apply stop propagation you can use this method as follows:

<a id="myselector" ng-click="clickOnUpload(); $event.stopPropagation();">
  Something
</a>

Solution 2

angular.element(domElement).triggerHandler('click');

EDIT: It appears that you have to break out of the current $apply() cycle. One way to do this is using $timeout():

$timeout(function() {
    angular.element(domElement).triggerHandler('click');
}, 0);

See fiddle: http://jsfiddle.net/t34z7/

Solution 3

This following solution works for me :

angular.element(document.querySelector('#myselector')).click();

instead of :

angular.element('#myselector').triggerHandler('click');

Solution 4

Just in case everybody see's it, I added additional duplicating answer with an important line which will not break event propagation

$scope.clickOnUpload = function ($event) {    
    $event.stopPropagation(); // <-- this is important

    $timeout(function() {
        angular.element(domElement).trigger('click');
    }, 0);
};

Solution 5

Using plain old JavaScript worked for me:
document.querySelector('#elementName').click();

View more solutions

Comments

[mulla.azzi]

No, i want to know the mechanism through which i can trigger ng-click manually.

[mulla.azzi]

even this is nor working, its throwing following error Error: [$rootScope:inprog] errors.angularjs.org/1.2.14/$rootScope/inprog?p0=%24apply at Error (native)

[Blago]

Can you replace the body of your click handler function with this line: alert('boom')? Can you see the alert?

[Blago]

You are going to have to show us a test case. Please send a fiddle if you want further assistance.

[mulla.azzi]

are you sure triggerHandler will fire ng-click event?

[mulla.azzi]

jsfiddle.net/U3pVM/3668 here is a small fiddle. Click on third check box and FIRST check box should also get selected

[WildlyInaccurate]

You probably want to use Angular's $timeout rather than setTimeout, as $timeout will run an $apply cycle for you if necessary. It also makes your code more testable as ngMock gives you full control over when $timeouts are executed. docs.angularjs.org/api/ng/service/$timeout

[Martin Probst]

Actually this should be $timeout(fn, 0, false); so that it doesn't invoke $apply, shouldn't it?

[Blago]

$timeout will break out of the current $apply cycle even with delay=0. So in the context of this question, the third argument is irrelevant.

[Blago]

what version of angular are you using. triggerHandler seems to work fine in 1.2.1: jsfiddle.net/t34z7

[Howie]

This should be the accepted answer. triggerHandler works. trigger does not in v1.2.25

[Ulterior]

dont forget to add '$event.stopPropagation();' just after the function start

[Sergii Shevchyk]

please explain why $(elem).click() doesn't work with Angular?

[Hassan Faghihi]

@WildlyInaccurate you sure $timeout is for angular and not jquery, cause when i call $timeout, it say "ReferenceError: $timeout is not defined" ... txtNickName: function () { $timeout(function () { angular.element('#btnStartChat').triggerHandler('click'); //angular.element('#btnStartChat').trigger('click'); }, 0);

[WildlyInaccurate]

@deadManN $timeout is a service and as such needs to be dependency-injected before you can use it docs.angularjs.org/api/ng/service/$timeout

[Daniel Nalbach]

If you are limited to jqLite and can't use a selector, do this instead: angular.element(document.querySelector('#mySelector')).trigg‌​er('click');

[yorch]

@DanielNalbach in current (and not so current) Angular versions 1.2+, you have to use triggerHandler instead of trigger

[Huangism]

Yea .trigger() is not a function in jqLite

[jpmottin]

@DotKu Maybe you are already in a $scope function like when you use in a $timeout function ? In other words, you can't call a $scope.$apply() in a $scope.$apply()... I hope this might helps you.

[Weijing Jay Lin]

@jpmottin I found it, it must be placed in $timeout. Thanks

[trysis]

Why did they remove trigger? It seems better/easier than triggerHandler. For one thing, triggerHandler does not even call the default browser click event, only the handlers you already attached.

[Florida G.]

Thanks! This finally worked for me in 1.5.11, and full jquery dependency. $timeout(function() { var el = document.getElementsByClassName('fa-chevron-up'); angular.element(el).trigger('click'); }, 0);

[Jhourlad Estrella]

OMG, Angular totallt ruined it. Why can't they mimick jQuery's $('#element').click()

[Abhishek]

I'm not so sure this still works...angularjs 1.6 this seems to not be working with full jquery

[ktaro]

Yeah. Works for me. Thanks.

[Todd Hale]

I get this error for this solution in my ng 1.5.3 app: Looking up elements via selectors is not supported by jqLite.