Javascript 如何通过控制台调试AngularJS中通过controllerAs绑定到控制器的变量

通常，当我使用控制器时，我会将需要的数据绑定到

$scope

以从标记访问它们。但是当我使用

controllerAs

时，数据应该附加到控制器中的

“this”

因此

“this.foo='bar'”

而不是

“$scope.foo='bar'”

---

但是，如何使用开发人员控制台从浏览器调试数据呢？通常我有我的

“AngularJS Batarang”

插件，我可以打印属于当前作用域的所有内容，但我不知道如何打印绑定到控制器的数据。

您实际上以相同的方式使用

$scope

；

controllerAs

名称将位于您的

$scope

上

因此，如果

controllerAs

被命名为“myController”：

• 开放式开发工具
• 为页面上的内容选择“检查元素”。您的控制台窗口现在可以访问该元素的

  $scope

  （感谢Batarang）
• 现在，您可以键入

  $scope.myController.foo

  来访问属性

---

每次在DOM中选择不同的元素时，console窗口中的

$scope

对象将引用适当的元素。

如果我正确地回答了您的问题，您可以使用以下方法调试绑定到控制器的值：

 var ctrl = ele.controller();

---

这是一篇关于调试的非常有用的文章。

好的旧监视点经常被忽略，但它确实具有暂停/捕获/报告甚至是控制台无法访问的数据的独特能力。非常感谢您的帮助！这是正确的暗示。我已经试过了，但问题是，我在下面的Plunker预览（）中试过了，因为内容包含在一个iframe中，所以我无法以正常的方式到达范围。如果没有Batarang扩展，您可以（也可以先“检查元素”，然后）执行

angular.Element（$0.scope（））.myController.foo