click angularjs button with javascript and element only

Question

I am working on a browser extension that will automatically click a button on a page. The code works on every site except ones with angularjs.

The following code is my attempt at clicking an angularjs button and have it register the click, but it does not work.

//applyButton is the button element.
if(angular) {
     var e = angular.element(applyButton);
     e.trigger('click');
     e.scope().$apply();
 } else {
     applyButton.click();
 }

Here is the angular html code for the applyButton that is not registering the "click"

<input value="Apply" class="apply button gift-card-apply" data-ng-click="!orderSubmitErrors.giftCard.sectionHasErrors &amp;&amp; applyGiftCard($event)" client-validation="onSubmit,giftCard,validateSubsection" type="button">

Is there a best practice to click buttons and change input fields for angularjs from javascript if I only have access to the document.element for those items?

does element exist when your code runs? Can't use conventional page load handling — charlietfl
– charlietfl, Commented Sep 14, 2015 at 21:47

scniro · Accepted Answer · 2015-09-14 23:12:28Z

1

It seems you need to wrap your element in a $timeout to invoke a .click on your element. Observe the following simplified example...

<div ng-app="app" ng-controller="ctrl">
    <button id="btn" ng-click="click()">click</button>
</div>

var app = angular.module('app', []).controller('ctrl', function($scope, $timeout) {
    $scope.click = function() {
        console.log('click');
    }

    $timeout(function() {
        angular.element(document.getElementById('btn')).trigger('click')
    });

    //does not work
    angular.element(document.getElementById('btn')).trigger('click')
});

With this, you will not be needing to call e.scope().$apply(); - $timeout will invoke a cycle if necessary. Additionally, while you didn't specify in your example, its worth nothing that .trigger() requires jQuery and is not baked into AngularJS's jqLite.

JSFiddle Link - demo

edited Sep 14, 2015 at 23:12

answered Sep 14, 2015 at 23:04

scniro

17k8 gold badges67 silver badges108 bronze badges

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

3 Comments

techdog Over a year ago

Thanks for the code example, for some reason I can't get past $timeout...it hangs when it sees it. But if(angular) is true. Also the jsfiddle seems to not be loading angular maybe jsfiddle is down.

scniro Over a year ago

are you injecting $timeout into your controller? The fiddle seems to be working could you try again?

techdog Over a year ago

example works in chrome but not firefox for some reason on jsfiddle. So I can see it working now. Thanks for the example. I understand how it is working now after playing with it.

Collectives™ on Stack Overflow

click angularjs button with javascript and element only

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related