There is a times when you need (or you just think you need) to invoke $scope function (inside your controller) directly from the browser JavaScript console.
DIY method:
The following is possibly the simplest case possible.
Let assume we have the following HTML & JS (no routes, no ng-view):
A here is the code to run inside your console.
Using Chrome Developer Tools
With Chrome Dev Tools, you just select an element using Chrome Dev Tools element selector (the loop or ctrl+shift+c on Win) and than you can access the element from the console with the $0, so now you can replace the document.querySelector('#someID') with $0 and run the following in the console:
Batarang (AngularJS Chrome Extension) – If you have Batarang installed, then you get special AngularJS tab, switch gives you overview of your $scope.
Global variable
You can also, go old fashion way and expose you $scope via global variable, and invoke directly through it.
Please let me know if you know any other technics.
In the file console.js should be “angular.element” rather than “ngular.element”. A small mistake.
Good eye, thanks for letting me know.
You can add jquery plugin that will return scope:
$.fn.scope = function() {
return angular.element(this[0]).scope();
};
and you will be able to use:
$('[ng-controller]:eq(0)').scope().someFunction();
Very useful, thanks for sharing!
When using Batarang highlight an element in the Element view will allow you to address a $scope variable directly in the console without requiring the angular.element($0).scope() dance.