Page 450 - AngularJS权威教程

430 第 33 章 调试 AngularJS

第33章

调试AngularJS

当我们构建大型Angular应用时，经常会遇到一些很难发现和解决的问题，从而让人抓狂。

33.1 从 DOM 中调试

尽管这既不是必要步骤，也不一定要从这个步骤开始，但我们可以访问附加给任意DOM元
素的Angular属性。我们可以使用这些属性来窥探数据是如何流入应用程序的。

永远都不应该依靠还在应用程序生命周期内的DOM元素来获取该元素的属性。
这项技术一般都是出于调试的目的才使用的。

为了从DOM中获取这些属性，我们需要找到感兴趣的元素。如果有完整的jQuery库可用，可
以使用jQuery的选择器语法：$("selector")。

然而，我们并不需要依赖于jQuery从 DOM中获取目标元素。相反，我们可以使用
document.querySelector()方法。

注意， document.querySelector()并不是在所有浏览器中都可用，它一般适合
①
②
选择不复杂的元素，而Sizzle （jQuery也使用这个库）或者jQuery 支持更复杂
的选择。
可以通过选择ngApp指令所在的元素来从DOM中检索$rootScope，然后将它包装为一个
Angular元素（使用angular.element()方法）。

对于一个Angular元素，可以从DOM内部调用不同的方法来检查我们的Angular应用。这样做，
需要从DOM中选择元素。在只使用JavaScript和Angular的情况下（这里的意思是除了使用Angular，
不使用其他任何库），可以以下面这种方式实现：

var rootEle = document.querySelector("html");
var ele = angular.element(rootEle);
可以使用这个元素提取应用程序的不同部分。

——————————
① http://sizzlejs.com/
② http://jquery.com/