angularjs如何在控制台进行错误调试_angularjs

《angularjs如何在控制台进行错误调试_angularjs》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、AngularJS如何在控制台进行错误调试当我们在编写AngularJS的应用时，通过Chrome,Firefox,和IE的JavaScript控制台来获取隐藏在应用之中的数据(Data)和服务(Service)是一件非常具有挑战性的工作。下面列出了一些简单的小窍门，可以帮助我们使用Javascript控制台来监视和控制一个正在运彳亍的Angular应用，使其更加容易测试、修改甚至是实时的编写Angular应用。1：获取Scopes(作用域)我们可以使用一行JS代码来获取任何的Scope(甚至是isolatedscopes):复制代码代码如下：>angula匚ele

2、ment((argetNode)・scope()->ChildScope{$id:"005",this:ChildScope,$$listeners:Object,$$listenerCount:Object,$parent:Scope...}或者获取isolatedscopes:复制代码代码如下：>angular.element(targetNode).isolateScope()->Scope{$id:”009",$$childTail:ChildScope,$$childHcad:ChildScope,$$prcvSibling:ChildScope,$$ne

3、xtSibling:Scope...}这里面的targetNode指的是HTMLNode(HTML节点)。你可以很容易的使用document.querySelector()來获取。2:监视ScopeTree(作用域树)为了更好的调试我们的应用，冇些时候我们需要查看页而上的Scope(作用域)的结构师怎样的。这时候我们就需要使用AngularJSBaratang和ng-inspector这两个Chrome浏览器扩展来帮助我们实时■查看Scope(作用域)的情况。并且，这两个扩展还有一些其他非常有用的功能。(1).AngularJSBaratangScopes

4、e(002)

5、es（服务）我们可以使用定义了ngApp元素的injector函数來抓取任何Service（服务）或者间接的通过任何带有ng-scopeclass的元素来获取Service（服务）。复制代码代码如下：>angulaEelementCdocument.querySelectorC^tml^J.injectorO.getC'MyService1）->Object{undo:function,redo:function,_pushAction:function,newDocument:function,init:function...}//Orslightlymorege

6、neric>angular.element（document.querySelector（g-scope,））.injector（）.get（,MyService,）接下來我们就口J以使用相关的Service就像我们在程序中injected（注入）过Z后那样使用。4:从directive中获取controller有一些directives（指令）会将一些特定（通常是可以共用的）功能定义成为一个控制器。为了从控制台屮获取一个指定directive（指令）的controller（控制器）示例，我们只需要使用control1er（）函数。复制代码代码如下：>angul

7、ar・element（'my・pages'）・conu*oller（）->Constructor{}最后一个不常用但是属于更高级的技巧。5:ChromeConsole（控制台）特性Chrome有很多在console（控制台）中用于调试网页应用的非常好用的快捷命令。下而是对Angular开发最冇帮助的一些命令：$0-$4:在instpectorwindow（监控器）中获取最后的5个D0M元素。这个快捷方法可以非常方便的帮助我们来抓取选定元素的scopes（作用域）：angular・element（$0）・scope（）$（selector）和$$（selector