current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 66 down vote favorite
26

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 120 down vote accepted

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>
share|improve this answer
4  
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
7  
please explain why $(elem).click() doesn't work with Angular? – shevchyk Mar 25 '15 at 12:18
7  
If you are limited to jqLite and can't use a selector, do this instead: angular.element(document.querySelector('#mySelector')).trigg‌​er('click'); – Daniel Nalbach Jul 6 '15 at 23:08
2  
@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 57 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
5  
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
3  
@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 10 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

You can do like

$timeout(function() {
   angular.element('#btn2').triggerHandler('click');
});
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
1  
This code is all over the place - there's a lot wrong with it - 2 elements with the same ID, there is no programatical triggering happening; you may as well delete the part where you write '.triggerHandler' because it's not doing anything, just normal event handling. – ness-EE Apr 4 '16 at 16:04
up vote 5 down vote

This following solution works for me : 

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

instead of :

angular.element('#myselector').triggerHandler('click');
share|improve this answer
    
works for me, thanks – Lucas Costa Aug 19 '16 at 20:05
    
@jpmottin, there is $apply error – DotKu Oct 5 '16 at 19:12
    
@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. – jpmottin Oct 6 '16 at 9:26
    
@jpmottin I found it, it must be placed in $timeout. Thanks – DotKu Oct 6 '16 at 17:07
up vote 0 down vote

I think it would be best to avoid "clicking" on the elements. Instead one should try to change the underlying data (ng-model), which (almost always) is watched by the element.

An example with a checkbox:

var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
  $scope.toggle = function() {
    $scope.myCheckboxValue = !$scope.myCheckboxValue;
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='myApp' ng-controller='myController'>
  <input type="checkbox" ng-model="myCheckboxValue" />
  <button ng-click="toggle()">Toggle</button>
</div>

share|improve this answer
up vote 0 down vote

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

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.