在视图中显示所有$scope变量-AngularJS

是否有一种方法可以在视图（HTML页面）中转储和显示$scope对象的所有属性，以便在AngularJS中进行调试。

有许多浏览器插件可用于此目的。我在safari中使用的一个名为ng inspector。您可以在所有主要浏览器中找到类似的插件。如果要手动执行，请检查一个元素（您将看到$0），并在控制台中执行

angular.element（$0.scope（）

）。它将在控制台中显示您的

$scope

对象

如果您确实需要将其转储到视图中，您可以使用此

<pre ng-repeat="(key, val) in this">{{key}} = {{val|json}}</pre>

{{key}}={{val|json}

---

您需要将代码更改为， 在控制器中

 var self =  this;
self.name = 'World';
self.foo = [1,2,3,4];
self.bar = {
"foo": "foo",
"bar": "bar",
"baz": "baz"
};
$scope.value = self;

---

这是Plunkner URL

您的浏览器有一个带有JavaScript调试程序的控制台，这是唯一的方法。没有办法在视图中转储所有的$scope并检查有什么和没有什么？最新的Chrome浏览器具有这种开箱即用的功能。Phil在下面说了什么，再加上使用angular batarang（上一个稳定版本）谢谢。我想使用控制台。