如何从chrome控制台angular度访问$ scopevariables

如何从chrome的控制台访问范围variables小部件

function MyCntrl($scope) { $scope.widgets = [ {text:'Widget #1', datarow:1, datacol:1, datasizex:3, datasizey:3}, {text:'Widget #2', datarow:2, datacol:1, datasizex:3, datasizey:3}, {text:'Widget #3', datarow:1, datacol:2, datasizex:3, datasizey:3}, {text:'Widget #4', datarow:2, datacol:2, datasizex:3, datasizey:3} ]; 

像$ scope.widgets的东西根本不在控制台中工作!

5 Solutions collect form web for “如何从chrome控制台angular度访问$ scopevariables”

范围绑定到DOM,因此您需要获取元素并使用一些angular码来获取范围。

你最好的办法是得到一个控制器绑定的元素,并看看它的范围。

下面是答案如何使用AngularJS访问浏览器控制台中的$ scopevariables?

这是一个没有batarang的范围的方法。 假设你在页面上引用了jquery和angular,你可以这样做:

 var scope = angular.element($('#selectorId')).scope(); 

或者如果您想通过控制器名称查找您的范围,请执行以下操作:

 var scope = angular.element($('[ng-controller=myController]')).scope(); 

在对模型进行更改之后,您需要通过调用将更改应用到DOM

 scope.$apply(); 

你可以按照Will的意见或安装Angular Batarang Chrome扩展。 这不仅可以让你查看和操作'$ scope'对象,让我们说你的JavaScript控制台,而且它也是开发复杂的AngularJS应用程序时的基本工具。

这里是一个例子:我有我的angular度单页应用程序以下的DOM:

 <div ng-controller="usersAppController as uac" class="ng-scope"> <div class="tab ng-scope is-normal is-active" id="rolesTab" ref="tabs" mode="normal" target-ref="rolesContent" xng-locals="xng.userApp.roles">Roles </div> </div> 

而这个股利存在于控制器名称usersAppController作为uac在这里我有控制器的语法

另外请注意,我在我的应用程序中使用jQuery:

$($ 0).controller()方法将使我可以直接访问$ scope对象上的uac对象。

$($ 0).scope()会给我我已经select的元素的原型链,如果我遵循这个链,我会发现我的范围对象在该元素上。

除了传统的基于控制台的命令。 我也发现这个铬插件非常方便。 只需select要检查的元素并切换到插件即可查看该范围的范围/variables。

https://chrome.google.com/webstore/detail/angularjs-batarang-stable/niopocochgahfkiccpjmmpchncjoapek

  • 在input元素中使用angularjsfilter
  • 三元模板
  • 如何更改范围之外的AngularJS数据?
  • angularjs文本区字符计数器
  • AngularJs删除ng-repeat中的重复元素
  • AngularJS:我不能在ng-click上设置一个variables值吗?
  • 如何禁用在AngularJSinput的修剪?
  • 如何使用指令定义的replace?
  • 在angular度创造空的承诺?
  • AngularJS文件夹结构
  • AngularJS:使用ui-router将对象传递到一个状态