current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 33 down vote favorite
15

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

_ele.click();

OR

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

How can this be done?

share|improve this question
    
Possible duplicate of stackoverflow.com/questions/10229964/… – Adil Mar 17 '14 at 5:11
1  
No, i want to know the mechanism through which i can trigger ng-click manually. – mulla.azzi Mar 17 '14 at 5:18
up vote 61 down vote accepted

The syntax is the following:

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

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>
share|improve this answer
3  
what version of angular are you using. triggerHandler seems to work fine in 1.2.1: jsfiddle.net/t34z7 – Blago Jul 18 '14 at 18:12
    
you must add $event.stopPropagation(); after start of the function – Ulterior Dec 1 '14 at 8:43
4  
please explain why $(elem).click() doesn't work with Angular? – shevchyk Mar 25 '15 at 12:18
3  
If you are limited to jqLite and can't use a selector, do this instead: angular.element(document.querySelector('#mySelector')).trigger('click'); – Daniel Nalbach Jul 6 '15 at 23:08
1  
@DanielNalbach in current (and not so current) Angular versions 1.2+, you have to use triggerHandler instead of trigger – yorch Oct 24 '15 at 8:51
up vote 43 down vote 
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/

share|improve this answer
2  
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) – mulla.azzi Mar 17 '14 at 5:27
2  
after adding timeOut now its working.... Thanks alot Blago :) – mulla.azzi Mar 17 '14 at 6:02
4  
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 – WildlyInaccurate Jun 3 '14 at 10:13
2  
This should be the accepted answer. triggerHandler works. trigger does not in v1.2.25 – Howie Oct 3 '14 at 10:28
2  
@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 – WildlyInaccurate Jun 19 '15 at 8:23
up vote 9 down vote

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);
};
share|improve this answer
up vote 6 down vote

Checkout the Jsfiddle

http://jsfiddle.net/7wq4yd59/

Or

Here I have added a simple Trigger Handler:

<html data-ng-app="angularApp">
    <head >
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script type="text/javascript" src="https://code.angularjs.org/1.1.1/angular.js"></script>
        <script type="text/javascript">
            angular.module('angularApp', [])
                    .controller('MyController',['$scope','$http', function($scope, $http) {
                $scope.triggerElement = true;
                var myElement= document.getElementById('myElement');
                angular.element(myElement).triggerHandler('click');

                $scope.showTriggerElement = function() {
                    $scope.triggerElement = false;
                }
                $scope.hideTriggerElement = function() {
                    $scope.triggerElement = true;
                }
            }]);
    </script>
    </head>
    <body>
        <div class="container" data-ng-controller="MyController">  
            <div>
                <div id="trigger-element" data-ng-hide="triggerElement">Hi Hello</div>
                <button class="btn" id="myElement" name="save" data-ng-click="showTriggerElement();">Show</button>
                <button class="btn" id="myElement" name="save" data-ng-click="hideTriggerElement();">Hide</button>
            </div>
        </div>
    </body>

</html>
share|improve this answer
up vote 4 down vote

You can do like

$timeout(function() {
   angular.element('#btn2').triggerHandler('click');
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.