How to get $rootElement from root Angular object

Question

My objective is to find the root element in an arbitrary Angular project if all I have is the angular object. This obviously isn't very kosher, so a hacked solution will do.

My first approach to this was to find("[ng-app]"), but this fails on bootstrapped apps. I've been playing around with the various angular modules, and I've hit an impasse.

I can do angular.injector(['ng']).get('$rootScope') to get the root scope. Why can't I just do angular.injector(['ng']).get('$rootElement') to get the root element?

Answer 1

angular.injector creates a new injector function, it does not return the one associated with the bootstrapped app.

Services in Angular are singletons in the sense that they are only created once per injector, which means that the following code:

angular.injector(['ng']).get('$rootScope')

Will create a new injector function and a new $rootScope every time it's executed.

The following line:

angular.injector(['ng']).get('$rootElement')

Will create a new injector function and try to retrieve the $rootElement, which does not exist for the newly created injector.

You need to retrieve the injector of the current app:

angular.element(DOMElement).injector();

For your specific case you can for example find the first element that is associated with a scope and go from there:

var element = document.querySelector('.ng-scope');
var $rootElement = angular.element(element).injector().get('$rootElement');
console.log($rootElement);

Demo: http://plnkr.co/edit/mQ5ZibnV0Jg8DreXn0w9?p=preview