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

问题:

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?

回答1:

you can see all of the scopes on the page using this CSS selector

.ng-scope { border: 1px solid red; }

and all of the bindings:

.ng-binding { border: 1px solid red; }

You can then retrieve them by converting the DOM element into selector

var selector = angular.element(some_dom_element);

Then use the selector to retrive the scope/controller/injector

var scope = selector.scope();
var controller = selector.controller();
var injector = selector.injector();

回答2:

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)

回答3:

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();

回答4:

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

回答5:

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).

回答6:

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

回答7:

In Angulars there is $rootScope, which is the root of every scope.It has child field and whole hierarchy is inside $rootScope.If you want to find a scope with html element,you will probably have a problems,because that scope can be Isolated scope.Maybe you have a directive there,which scope is isolated.If you have anything like that,try to use el.isolatedScope()

回答8:

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.