StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Pick an element in the HTML panel of the developer tools and type this in the console:</p> <pre><code>angular.element($0).scope() </code></pre> <p>In <a href="http://en.wikipedia.org/wiki/WebKit" rel="noreferrer">WebKit</a> and Firefox, <code>$0</code> is a reference to the selected DOM node in the elements tab, so by doing this you get the selected DOM node scope printed out in the console.</p> <p>You can also target the scope by element ID, like so:</p> <pre><code>angular.element(document.getElementById('yourElementId')).scope() </code></pre> <p><strong>Addons/Extensions</strong></p> <p>There are some very useful Chrome extensions that you might want to check out:</p> <ul> <li><p><a href="https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk" rel="noreferrer">Batarang</a>. This has been around for a while.</p></li> <li><p><a href="http://ng-inspector.org/" rel="noreferrer">ng-inspector</a>. This is the newest one, and as the name suggests, it allows you to inspect your application's scopes.</p></li> </ul> <p><strong>Playing with jsFiddle</strong></p> <p>When working with jsfiddle you can open the fiddle in <em>show</em> mode by adding <code>/show</code> at the end of the URL. When running like this you have access to the <code>angular</code> global. You can try it here:</p> <p><a href="http://jsfiddle.net/jaimem/Yatbt/show" rel="noreferrer">http://jsfiddle.net/jaimem/Yatbt/show</a></p> <p><strong>jQuery Lite</strong></p> <p>If you load jQuery before AngularJS, <code>angular.element</code> can be passed a jQuery selector. So you could inspect the scope of a controller with</p> <pre><code>angular.element('[ng-controller=ctrl]').scope() </code></pre> <p>Of a button</p> <pre><code> angular.element('button:eq(1)').scope() </code></pre> <p>... and so on.</p> <p>You might actually want to use a global function to make it easier:</p> <pre><code>window.SC = function(selector){ return angular.element(selector).scope(); }; </code></pre> <p>Now you could do this</p> <pre><code>SC('button:eq(10)') SC('button:eq(10)').row // -> value of scope.row </code></pre> <p>Check here: <a href="http://jsfiddle.net/jaimem/DvRaR/1/show/" rel="noreferrer">http://jsfiddle.net/jaimem/DvRaR/1/show/</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload