Menu
Is there a way of debugging the angularjs application when it is loaded in the browser?
ie. I wish to get the $rootScope of my current application. How would I do that?
925
For debugging AngularJS in Chrome you can use AngularJS Batarang. (From recent reviews on the plugin it seems like AngularJS Batarang is no longer being maintained. Tested in various versions of Chrome and it does not work.) You can also use ng-inspect for debugging angular.
All applications have a $rootScope which is the scope created on the HTML element that contains the ng-app directive. The rootScope is available in the entire application. If a variable has the same name in both the current scope and in the rootScope, the application uses the one in the current scope.
An app can have only one $rootScope which will be shared among all the components of an app.
The main difference is the availability of the property assigned with the object. A property assigned with $scope cannot be used outside the controller in which it is defined whereas a property assigned with $rootScope can be used anywhere.
angular.element(document.querySelector('[ng-controller=hw]')).scope(); This will give you the scope at that element. Share Improve this answer Follow edited Feb 25 '16 at 15:15 Mo. 23.2k3535 gold badges143143 silver badges206206 bronze badges
Just before a scope is destroyed, a $destroyevent is broadcasted on this scope. Application code can register a $destroyevent handler that will give it a chance to perform any necessary cleanup. Note that, in AngularJS, there is also a $destroyjQuery event, which can be used to clean up DOM bindings before an element is removed from the DOM.
- type in module ng Overview A root scope can be retrieved using the $rootScopekey from the $injector. Child scopes are created using the $new()method. (Most scopes are created automatically when compiled HTML template is executed.) See also the Scopes guidefor an in-depth introduction and usage examples. Inheritance
A root scope can be retrieved using the $rootScopekey from the $injector. Child scopes are created using the $new()method. (Most scopes are created automatically when compiled HTML template is executed.) See also the Scopes guidefor an in-depth introduction and usage examples.
+1 for Batarang
Also, you can get the scope from any element in the DOM by executing the following from the console
angular.element(DOMNODE).scope()
Where DOMNODE, is of course, a reference to a DOM node.
For example, in Chrome in the elements tab you can select the node where the ng-app directive is, and get the root scope with
angular.element($0).scope()
In the developer console try this
$rootScope = angular.element(document).scope()
Batarang -- A Google Chrome plugin for AngularJS
After you installed this, you can do
console.log($rootScope);
and check the scope object in your chrome console.
BTW, if you want to get $rootScope, you need to inject to your controller
like
app.controller('MainCtrl', function($scope, $rootScope) {
}
In developer console type angular.element('body').scope(); in case of your app is <body data-ng-app="SomeApp">
4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
