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: https://stackoverflow.com/questions/22795628/calling-angular-controller-function-from-browser-console — bryan60, Jun 27 '19 at 16:15
https://stackoverflow.com/questions/35296704/angular2-how-to-call-component-function-from-outside-the-app check this — samnu pel, Jun 27 '19 at 16:16
@samnupel stuff like that works, but requires modifying the angular application. — bryan60, Jun 27 '19 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, Jun 27 '19 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, Jun 27 '19 at 17:18
are you using angularjs or angular? you seem to be mixing concepts from the different frameworks. your sample code is 100% angularjs, but you're saying it's out of date, and saying things from angular are working somewhat. — bryan60, Jun 27 '19 at 17:24
@bryan60 hmm... good point, and you might be right! augular.version gives me 1.6.4. My code with the injector() actually works from my Chrome Extension when I inject it on the page. I'm very familiar with JS but never really worked with Angular (or AngularJS), especially not when it comes to hooking up to an existing app. — SHamel, Jun 27 '19 at 17:33
I have found what I was looking for - so simple! [How to trigger ngClick programmatically](https://stackoverflow.com/questions/22447374/how-to-trigger-ngclick-programmatically) — SHamel, Jul 17 '19 at 17:23

score 0 · Answer 1 · answered Jun 27 '19 at 18:58

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.

Simulate click on angular element

1 Answers1