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

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


当前回答

对于这些答案有一个警告:如果你对控制器进行了别名,那么你的作用域对象将位于scope()返回的对象中的一个对象中。

例如,如果你的控制器指令是这样创建的: <div ng-controller="FormController as frm"> 然后访问控制器的startDate属性,调用angular.element($0).scope().frm.startDate

其他回答

只需将$scope赋值为全局变量。问题解决了。

app.controller('myCtrl', ['$scope', '$http', function($scope, $http) {
    window.$scope = $scope;
}

实际上,我们在开发中比在生产中更需要$scope。

@JasonGoemaat已经提到了,但添加它作为这个问题的合适答案。

你可以先从DOM中选择一个在你想要检查的范围内的元素:

然后你可以通过在控制台中查询以下命令来查看作用域对象:

angular.element .scope (0) ()

你可以查询范围内的任何属性,例如:

.widgets angular.element(0)美元.scope ()

或者你可以检查附在范围上的控制器:

心理图像元素(0.06美元)。范围(myControllerName美元)。

(另一种可行的方法是在代码中添加断点。如果$scope目前在当前的“普通旧JavaScript”范围内,那么你可以在控制台中检查$scope的值。)

我使用了angular.element($(".ng-scope")).scope();在过去,它工作得很好。如果你在页面上只有一个应用范围,那就好了,或者你可以这样做:

angular.element ($ (" div [ng-controller = controllerName] ")) .scope ();或angular.element (document.getElementsByClassName(“ng-scope”).scope ();

在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的控制台

为了改进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();