I am facing a challenge where I need to execute Angular controller functions from outside of the application. Due to simplicity reasons, I am unable to make modifications directly to the Angular app itself. Ideally, the code should be able to run in the browser console and eventually be integrated into a Chrome Extension.
Despite researching various solutions, I have come across outdated or ineffective methods. A particular post on Stack Overflow titled AngularJS. How to call controller function from outside of controller component showed promise, but unfortunately, I have not been able to successfully implement it.
The given HTML snippet is as follows:
<div data-ng-if="::ctrl.isEntityNotesEnabled"
data-ng-class="{'menu__item--enabled': ctrl.isNotesShown}"
data-ng-click="ctrl.toggleNotesSection()" role="button">
Show
</div>
My objective is to trigger the function ctrl.toggleNotesSection() using JavaScript but from an external source.
UPDATE: I have attempted several strategies:
// Using the old AngularJS method, this results in undefined
angular.element('ng-controller-selector').scope()
// The following approach seems closer to the desired outcome, but 'ctrl' and 'toggleNotesSection()' are not accessible
angular.element('ng-controller-selector').injector().get('$rootScope')
// I also experimented with using the DIV element directly, without success
angular.element('div selector')