如何通过控制台调试变量，这些变量通过 AngularJS 中的 controllerAs 绑定到控制器答案

【问题标题】：How can I debug variables by console which bind to the controller by controllerAs in AngularJS如何通过控制台调试变量，这些变量通过 AngularJS 中的 controllerAs 绑定到控制器
【发布时间】：2015-02-23 08:04:25
【问题描述】：

通常当我使用控制器时，我将需要的数据绑定到 $scope 以从标记中访问它们。但是当我使用controllerAs 时，数据应该附加到控制器中的"this"。

所以"this.foo = 'bar'" 而不是"$scope.foo = 'bar'"

但是我怎样才能使用开发者控制台从浏览器中调试数据呢？通常我有我的"AngularJS Batarang" 插件，我可以打印属于当前范围的所有内容，但我不知道如何打印绑定到控制器的数据。

【问题讨论】：

良好的旧观察点经常被忽视，但确实具有暂停/捕获/报告甚至无法从控制台访问的匿名数据的独特能力。

标签： javascript angularjs debugging console

【解决方案1】：

你实际上以同样的方式使用$scope； controllerAs 名称将出现在您的 $scope 上。

所以如果controllerAs 被命名为“myController”：

打开开发者工具
为页面上的某些内容选择“检查元素”。您的控制台窗口现在可以访问该元素的 $scope（感谢 Batarang）
现在您可以输入$scope.myController.foo 来访问属性。

每次您在 DOM 中选择不同的元素时，控制台窗口中的 $scope 对象都会引用相应的内容。

【讨论】：

非常感谢您的帮助！这是正确的提示。我已经尝试过了，但问题是，我已经在以下 Plunker 预览 (embed.plnkr.co/ZtuoTVgPLuMWDT2ejULW/preview) 中尝试过，并且由于内容包含在 iframe 中，我无法以正常方式达到范围。
如果你没有 Batarang 扩展，你可以（也可以先“检查元素”然后）angular.element($0).scope().myController.foo

【解决方案2】：

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

 var ctrl = ele.controller();

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

【讨论】：