In AngularJS, how do you find all the scopes on a

Question

Once we have a scope in hand, we can navigate to its root and explore the scope hierarchy.

But is there a direct way to find all the scopes on a page?

Likewise given an HTML element, is there a direct way to find its enclosing scope?

Answer 1

You should develop your application in Google Chrome browser (if you are not using it already) and than you can use awesome Batarang extension that adds new dedicated AngularJS panel to the Developer tools. You can see all the scopes there, what is the relationships between them and what value have all its attributes.

http://blog.angularjs.org/2012/07/introducing-angularjs-batarang.html

Answer 2

I recommend AngularJS Batarang. It's a debugging tool that lets you visualize all the scopes on the page (among other things).

https://github.com/angular/angularjs-batarang

Answer 3

You can find out a scope for element using:

$(element).scope()

or

angular.element(element).scope()

I don't think there is a way to get all scopes on a page easily (other than navigating down from root scope).

Answer 4

Not all scopes are bound to elements. If you want all scopes on the page, walk the scope tree like this:

function getScopes(root) {
    var scopes = [];

    function visit(scope) {
        scopes.push(scope);
    }
    function traverse(scope) {
        visit(scope);
        if (scope.$$nextSibling)
            traverse(scope.$$nextSibling);
        if (scope.$$childHead)
            traverse(scope.$$childHead);
    }

    traverse(root);
    return scopes;
}

getScopes($rootScope)

Answer 5

I don't know why this would be useful to you, but you can do this:

scopeElements = document.getElementsByClassName('ng-scope');
scopes = [].map.call(scopeElements, function(e){ return angular.element(e).scope(); })

The other option is to traverse the scope tree starting at the root scope using our private apis: $$childHead and $$nextSibling.

It's more likely that you just want to see where the scope boundaries are and you can do it with this:

scopeElements = document.getElementsByClassName('ng-scope');
angular.element(scopeElements).css('border', '1px solid red');

Then you can just use web inspector to select an element of interest and get its scope by:

angular.element($0).scope();

Answer 6

In Chrome, using developer tools. I use the console command line.

Pick an element in the HTML panel of the developer tools and type this in the console:

angular.element($0).scope()

or just right click on a page element and select: inspect element.

$($0).scope() will return the scope associated with the element. You can see its properties right away.

To view an elements parent scope:

$($0).scope().$parent

You can chain this also:

$($0).scope().$parent.$parent

You can look at the root scope:

$($0).scope().$root

If you highlighted a directive with isolate scope, you can look at it with:

$($0).isolateScope()

If available, you can do the same with child scope and sibling scope.

$($0).scope().$sibling

I can walk up and down the scopes to verify what scope has what controllers, objects, etc and when you are working with custom directives, it's essential. In a large code base, it's not so easy to find things like this.

Recently, I had two controllers with the same name, save for one uppercase letter attached to a view. I was using the wrong controller and it took a while before I realized that was the issue with my bindings.