Is it possible to output entire scope in template Angularjs?

Question

Any node in the scope can be outputted like this:

{{variable}}

could you output the entire scope somehow? something like

{{$scope}}

score 1 · Accepted Answer · edited May 23 '17 at 12:25

As a proof of concept, I created a directive to pretty-print the current scope.

You may use it anywhere, simply by adding <scope /> into the template.

Please note that this is just an idea and has several issues:

It depends on ngSanitize to make ng-bind-html work.
It executes prettyScope() several times within an $apply() so it may become sluggish when $scope objects are large and/or have many chained updates (I guess).

The out-of-this-world implementation of syntaxHighlight is taken from here.

Full code and some scope inheritance and isolate scope cases on this plunker.

score 0 · Answer 2 · answered May 27 '14 at 14:02

0

Sure.

$scope.scope = $scope

{{scope}}

Yet, just out of curiosity, why would you do that?

Edit

I didn't test this before answering. Mea culpa. This seems not to work, i get a string of "$SCOPE".

However, as mentioned in the comments, shouldn't console.dir() do the job?

answered May 27 '14 at 14:02

Wottensprels

my data-binding in ie-8 isn't working for some fields, so I'm trying to figure out where the data is. – Himmators May 27 '14 at 14:04
Why not `console.dir()`? – Wottensprels May 27 '14 at 14:06
1

IE 8 doesn't have `console.dir`. – Steve Klösters May 27 '14 at 14:08
please let me know if you have a better option for this! – Himmators May 27 '14 at 14:09
I had the same experience, outputting $scope – Himmators May 27 '14 at 14:09
AngularJS will not stringify scopes, see [the source](https://github.com/angular/angular.js/blob/master/src/Angular.js#L945). You could write your own filter, call it `debug`, that calls `JSON.stringify` directly rather than through `angular.toJson`. – Steve Klösters May 27 '14 at 14:16

score -1 · Answer 3 · edited May 23 '17 at 11:53

-1

Of course it is! Check out this Plunkr.

Since $scope references itself, you need to use an altered stringify method. Thanks to this post for that!

But another great option for exploring the scope is Batarang. Check it out! Unfortunately it's only for chrome.

edited May 23 '17 at 11:53

Community

answered May 27 '14 at 14:05

Sam P

Yep! Check my edited post for a plunkr of how to display the $scope. – Sam P May 27 '14 at 14:19
1

If you're a Firefox user, checkout a small Firebug extension called [AngScope](https://addons.mozilla.org/en-US/firefox/addon/angscope-simple-angularjs-s/) I've written. It helps you inspect `$scope` objects into Firebug's DOM inspector. – Kos Prov May 27 '14 at 14:42

3 Answers3