Inspecting scope in Angular application

This article was posted by Michał Dudak on 2016-07-28 in Angular JS

A quick tip for today – how to inspect a scope of any element in an Angular JS application?

Referencing selected DOM elements in browsers’ dev tools

First of all – a simple, not-so-widely know trick to get a reference to a given DOM element in a brower’s developer tools: when you select any element in the DOM tab (called Inspector in Firefox, Elements in Chrome, and DOM Explorer in Edge) you can get refer to it in the console by typing $0.

First, select an element
Firefox Dev Tools showing the Inspector tab

Then, type in $0 in the console to access it

Firefox Dev Tools showing the Console tab

You can, of course get the element by any other means, as querySelectorAll(), getElementById() or jQuery methods. It’s important to somehow reference the element in question.

Accessing scope of an element

Now, to gain access to the Angular scope associated with the element, we need to wrap it in jqLite or jQuery object. A universal way to do this is to use the angular.element($0) function, but if jQuery is loaded on the page and available for Angular, it’s as simple as $($0).

Lastly, you just need to execute scope() method on the returned wrapper:

Accessing isolated scope

Some elements may have two scopes associated with them – an ‘ordinary’ one and isolated directive scope. The method described above will only allow you to inspect the ordinary scope. To gain access to the isolated one, you’ll have to call .isolateScope() instead of .scope() on a wrapped DOM element. If an isolated scope it not present, this method will just return undefined.

No comments so far. Start the discussion!

Leave a Reply

Your email address will not be published. Required fields are marked *