How to trigger ngClick programmatically
JavascriptJqueryAngularjsAngularjs Ng-ClickJavascript Problem Overview
I want to trigger ng-click
of an element at runtime like:
_ele.click();
OR
_ele.trigger('click', function());
How can this be done?
Javascript Solutions
Solution 1 - Javascript
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 - Javascript
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 - Javascript
This following solution works for me :
angular.element(document.querySelector('#myselector')).click();
instead of :
angular.element('#myselector').triggerHandler('click');
Solution 4 - Javascript
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 - Javascript
Using plain old JavaScript worked for me:
document.querySelector('#elementName').click();
Solution 6 - Javascript
The best solution is to use:
domElement.click()
Because the angularjs triggerHandler(angular.element(domElement).triggerHandler('click')
) click events does not bubble up in the DOM hierarchy, but the one above does - just like a normal mouse click.
https://docs.angularjs.org/api/ng/function/angular.element
http://api.jquery.com/triggerhandler/
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click
Solution 7 - Javascript
You can do like
$timeout(function() {
angular.element('#btn2').triggerHandler('click');
});
Solution 8 - Javascript
This code will not work (throw an error when clicked):
$timeout(function() {
angular.element('#btn2').triggerHandler('click');
});
You need to use the querySelector as follows:
$timeout(function() {
angular.element(document.querySelector('#btn2')).triggerHandler('click');
});
Solution 9 - Javascript
Simple sample:
HTML
<div id='player'>
<div id="my-button" ng-click="someFuntion()">Someone</div>
</div>
JavaScript
$timeout(function() {
angular.element('#my-button').triggerHandler('click');
}, 0);
What this does is look for the button's id
and perform a click action. Voila.
Source: https://techiedan.com/angularjs-how-to-trigger-click/
Solution 10 - Javascript
Include following line in your method there you want to trigger click event
angular.element('#btn_you_want_to_click_progmaticallt').triggerHandler('click');
});