Simulate click on angular element

Question

I need to call some Angular controller functions from outside the app. I can't modify the Angular app itself - for sake of simplicity, the code should run in the browser console (the final will be integrated in a Chrome Extension).

I looked at other answers - but they are outdated or simply do not work. AngularJS. How to call controller function from outside of controller component seemed promising, but can't get it to work.

Given the following HTML:

<div data-ng-if="::ctrl.isEntityNotesEnabled"
     data-ng-class="{'menu__item--enabled': ctrl.isNotesShown}"
     data-ng-click="ctrl.toggleNotesSection()" role="button">
  Show 
</div>

I want to call ctrl.toggleNotesSection() from JavaScript - but outside of the app.

UPDATE: Some things I tried:

// this will return undefined, old AngularJS approach
angular.element('ng-controller-selector').scope()
// seems a bit closer to what I want, but "ctrl" isn't exposed, nor toggleNotesSection()
angular.element('ng-controller-selector').injector().get('$rootScope')
// I also tried using the DIV element, without success
angular.element('div selector')

the answer linked is pretty much the only way it can work if you can't modify the app to put in a proper listener. see here for the same answer: stackoverflow.com/questions/22795628/… — bryan60
– bryan60, Commented Jun 27, 2019 at 16:15
@samnupel stuff like that works, but requires modifying the angular application. — bryan60
– bryan60, Commented Jun 27, 2019 at 16:17
@bryan60 - this seems to be for older versions of Angular, can't get this to work - do you have example code? — SHamel
– SHamel, Commented Jun 27, 2019 at 17:17
@samnupel - sorry, I'm looking at the accepted solution and others, can't figure it out. Also, it is possible to "attach" to angular from outside. In another part of my code, I'm doing this: const injector = angular.element(document.body).injector(), someService = injector.get("someService"); someService.update(data); So I feel I'm close to the solution... — SHamel
– SHamel, Commented Jun 27, 2019 at 17:18

georgeawg · Accepted Answer · 2019-06-27 18:58:07Z

0

Some things I tried:

// this will return undefined, old AngularJS approach
angular.element('ng-controller-selector').scope()

The production version of AngularJS has the .scope() method disabled in order to boost performance.

If you wish to debug an application with this information then you should open up a debug console in the browser then call this method directly in this console:

angular.reloadWithDebugInfo();

The page should reload and the debug information should now be available.

For more see the docs pages on $compileProvider and angular.reloadWithDebugInfo.

answered Jun 27, 2019 at 18:58

georgeawg

49k13 gold badges78 silver badges98 bronze badges

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

Collectives™ on Stack Overflow

Simulate click on angular element

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related