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

Question

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

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

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

Answer 1

你其实也是这样使用$scope的； controllerAs 名字将出现在您的 $scope 上。

所以如果 controllerAs 被命名为 "myController":

• 打开开发者工具
• Select "Inspect Element" 页面上的内容。您的控制台 window 现在可以访问该元素的 $scope（感谢 Batarang）
• 现在您可以键入 $scope.myController.foo 来访问属性。

每次您 select DOM 中的不同元素时，控制台 window 中的 $scope 对象将引用合适的内容。

Answer 2

如果我没听错你的问题，你可以使用以下方法调试绑定到控制器的值：

 var ctrl = ele.controller();

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