Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get $rootElement from root Angular object

Tags:

angularjs

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?

like image 288
Jamie Avatar asked May 24 '14 00:05

Jamie


People also ask

How does the root module work in angular?

This happens by a combination of the root module and the root component working together. The root component is the very first component that is referenced and hosted in the main index.html web page. Everything else in Angular builds off of this root, so it helps to take a close look at how this root component works.

How to get a reference to the root component of an element?

To get a reference to the root component, you can inject ApplicationRef: constructor (private app:ApplicationRef) { let element: ElementRef = this.app ['_rootComponents'] [0].location; } I can't use the ApplicationRef object because loadNextToLocation function only accepts typeof ElementRef object.

How angular bootstraps an application to get running?

In this tutorial we’ll learn about how Angular bootstraps an application to get running. This happens by a combination of the root module and the root component working together. The root component is the very first component that is referenced and hosted in the main index.html web page.

How to create an app component in angular?

If you use the Angular CLI to scaffold the project for you, an app component is created as the root component for you. it consists of an app folder and the files needed for that angular component. We can delete the default markup in the app.component.ts file as we are going to start from scratch.


1 Answers

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

like image 65
tasseKATT Avatar answered Oct 19 '22 11:10

tasseKATT