Invoking an Angular click event from browser console

Question

I'm inspecting the DOM on an Angular application and seeing a simple link such as the following:

<button type="button" class="button mini text right clear-all" ng-show="draft.roster.slotsFilled" ng-click="draft.resetRoster()" really="Are you sure you want to clear all players from your team?">

I wanted to try to invoke the ng-click command here directly into the browser console by simply pasting draft.resetRoster(); Unfortunately I'm getting draft is not defined when trying to access it through the console. The link works perfectly fine itself though.

What's the best way to access/invoke the code that the ng-click attribute is referencing here?

PSL · Accepted Answer · 2015-05-27 02:46:21Z

ng-click just registers a click event only so you could literally fire a click event from console by selecting the element. Example:-

Say your button can be uniquely identified by all these css classes, you could do:

//You could use jquery as well if it is available, here some vanilla accessors.
document.querySelector('.button.mini.text.right.clear-all').click();
//If you have multiple, use querySelectorAll and 
//select the respective element or if you have an Id:
document.getElementById('#myButton').click();

or you can use extensions like batarang (chrome) to access the scope directly or get the scope of the element using

angular.element(elementRefGotFromOneOfTheAboveWays).scope().draft.resetRoster();`

and if you want to see change reflected in DOM you would need to call scope.$apply() manually, i.e

var scope = angular.element(elementRefGotFromOneOfTheAboveWays).scope();
scope.draft.resetRoster();
scope.$apply();

Jimmy Baker · Accepted Answer · 2015-05-27 02:36:13Z

1

Using Chrome, install the angular batarang extension, then simply right click on the element, click "Inspect element" and in the console type:

$scope.draft.resetRoster()

If you have methods in an angular service that you'd like to call, you can access the service by doing:

service = angular.element(document).injector().get('NameOfServiceHere')
service.somePropertyOrMethod()

answered May 27, 2015 at 2:36

Jimmy Baker

3,2551 gold badge27 silver badges27 bronze badges

Collectives™ on Stack Overflow

Invoking an Angular click event from browser console

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related