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

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

Answer 2

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