CUF_meeting_knowledge_share

CUF_meeting_knowledge_share copied to clipboard

Angular Debug 小技巧

下面是对文章Tips & Tricks for debugging unfamiliar AngularJS code的摘抄

查看元素的 scope

• 打开 chrome dev tools（使用F12）。
• 用 Inspect 工具，在页面上选择一个元素。
• 在控制台内，用 $($0) 取得该元素，如果没有导入 JQuery，则用 angular.element($0)。
• $($0).scope() 返回该元素上的 scope ，可以检查该 scope 中属性。
• 如果属性继承自父 scope，该属性不会在当前 scope 中显示。
• 你可以通过 $($0).scope().$parent 查看父 scope , 你也可以通过 $($0).scope().$parent.$parent 依次往上查看。
• 你可以查看 root scope : $($0).scope().$root
• 如果你 Inspect 一个指令，可以通过 $($0).isolateScope() 查看它的隔离 scope。
• 如果你 Inspect 指令中的一个带隔离 scope 的元素，你也可以用 $($0).scope() 方法。

scope 中的属性来自于哪里

• 例如你要查找一个属性 foo , 你可以使用 $($0).scope().foo
• 如果该属性被定义，说明该属性存在。
• 不存在的话，你继续向上寻找，直到找到为止。
• 但是这样依然无法确定属性在哪里？因为 scope 之间存在继承关系，子 scope 可以访问 父 scope 中的变量。
• 你需要通过 $($0).scope().hasOwnProperty('foo') 确定属性 foo 是否在当前 scope。
• 如果返回 false ，继续向上查找 $($0).parent().scope().hasOwnProperty('foo') 直达找到为止。

当前元素属于哪个 controller

• $($0).closest('[ng-controller]').attr('ng-controller')

如何让修改过的属性值生效

• $($0).scope().isFoo = true 设置 isFoo 属性为 true。
• $($0).scope().$digest() 迫使 Angular 改变该值。
• 页面 Dom 会发生相应的变化。

其他资料: Debugging AngularJS