我想访问我的$范围变量在Chrome的JavaScript控制台。我怎么做呢?

我既不能看到$scope也不能看到我的模块myapp的名称在控制台中作为变量。


当前回答

要添加和增强其他答案,在控制台中输入$($0)以获取元素。如果它是一个Angularjs应用程序,则默认加载jQuery精简版。

如果你不使用jQuery,你可以使用angular.element($0)如下:

angular.element($0).scope()

要检查你是否有jQuery和版本,在控制台中运行这个命令:

$.fn.jquery

如果您已经检查了一个元素,那么当前选择的元素可以通过命令行API引用$0获得。Firebug和Chrome都有这个引用。

然而,Chrome开发工具将可用的最后五个元素(或堆对象)选择通过属性命名$0,$1,$2,$3,$4使用这些引用。最近选择的元素或对象可以引用为$0,次近的元素或对象可以引用为$1,依此类推。

下面是Firebug的命令行API引用,它列出了它的引用。

$($0).scope()将返回与元素关联的范围。你可以马上看到它的属性。

你还可以使用其他一些东西:

查看元素的父作用域:

(0)美元.scope()。美元的父母。

你也可以链接这个:

(0)美元.scope()。父母。父母美元

你可以看看根作用域:

(0)美元.scope根。美元()

如果你用隔离作用域高亮显示了一个指令,你可以用:

(0)美元.isolateScope ()

更多细节和示例请参见调试不熟悉的Angularjs代码的提示和技巧。

其他回答

我通常使用jQuery data()函数:

$($0).data().$scope

$0是当前在chrome DOM检查器中选中的项目。 1美元,2美元…等等都是之前选定的项目。

为了改进jm的回答……

// Access whole scope
angular.element(myDomElement).scope();

// Access and change variable in scope
angular.element(myDomElement).scope().myVar = 5;
angular.element(myDomElement).scope().myArray.push(newItem);

// Update page to reflect changed variables
angular.element(myDomElement).scope().$apply();

或者如果你使用jQuery,它也会做同样的事情…

$('#elementId').scope();
$('#elementId').scope().$apply();

从控制台访问DOM元素的另一种简单方法(正如jm提到的)是在“elements”选项卡中单击它,它自动被存储为$0。

angular.element($0).scope();

检查元素,然后在控制台中使用它

s = $($0).scope()
// `s` is the scope object if it exists

在Chrome的控制台:

 1. Select the **Elements** tab
 2. Select the element of your angular's scope. For instance, click on an element <ui-view>, or <div>, or etc.
 3. Type the command **angular.element($0).scope()** with following variable in the angular's scope

例子

angular.element($0).scope().a
angular.element($0).scope().b

Chrome的控制台

出于调试的目的,我把它放在控制器的开头。

   window.scope = $scope;

  $scope.today = new Date();

我是这样使用它的。

然后删除它,当我完成调试。