在开发人员工具的HTML面板中选择一个元素，并在控制台中键入:

angular.element($0).scope()

在WebKit和Firefox中，$0是对元素选项卡中所选DOM节点的引用，因此这样做可以在控制台中打印出所选DOM节点范围。

你也可以通过元素ID定位作用域，如下所示:

angular.element(document.getElementById('yourElementId')).scope()

插件/扩展

这里有一些非常有用的Chrome扩展，你可能想看看:

Batarang。这种情况已经存在一段时间了。 ng-inspector。这是最新的版本，顾名思义，它允许您检查应用程序的作用域。

使用jsFiddle

当使用jsfiddle时，您可以通过在URL末尾添加/show以显示模式打开小提琴。当像这样运行时，你可以访问angular全局变量。你可以在这里试试:

http://jsfiddle.net/jaimem/Yatbt/show

jQuery Lite

如果你在加载AngularJS之前加载jQuery, angular。元素可以传递一个jQuery选择器。你可以检查控制器的作用域

angular.element('[ng-controller=ctrl]').scope()

一个按钮

 angular.element('button:eq(1)').scope()

．.． 等等。

你可能想要使用一个全局函数来让它更简单:

window.SC = function(selector){
    return angular.element(selector).scope();
};

现在你可以这样做

SC('button:eq(10)')
SC('button:eq(10)').row   // -> value of scope.row

点击这里查看:http://jsfiddle.net/jaimem/DvRaR/1/show/

在控制器的某个地方(通常最后一行是一个好地方)，放置

console.log($scope);

如果你想查看内部/隐式作用域，比如ng-repeat的内部，类似这样的方法可以工作。

<li ng-repeat="item in items">
   ...
   <a ng-click="showScope($event)">show scope</a>
</li>

然后在控制器中

function MyCtrl($scope) {
    ...
    $scope.showScope = function(e) {
        console.log(angular.element(e.srcElement).scope());
    }
}

注意，上面我们在父作用域中定义了showScope()函数，但这是可以的…子/内部/隐式作用域可以访问该函数，然后该函数根据事件打印出作用域，从而打印出与触发事件的元素关联的作用域。

@jm-的建议也工作，但我不认为它在jsFiddle工作。我得到这个错误在jsFiddle在Chrome:

> angular.element($0).scope()
ReferenceError: angular is not defined

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

如果你已经安装了Batarang

然后你可以这样写:

$scope

当你在chrome的元素视图中选择了元素。 参考- https://github.com/angular/angularjs-batarang#console

我同意最好的是Batarang在选择对象后使用它的$scope(它与angular.element($0).scope()相同，甚至更短的jQuery: $($0).scope()(我的最爱))

同样，如果你像我一样在body元素上有主作用域，那么$('body').scope()就可以了。

这是一种在没有Batarang的情况下获得瞄准镜的方法，你可以:

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

或者如果你想通过控制器名找到你的作用域，这样做:

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

在你对你的模型做了更改之后，你需要通过调用以下命令将更改应用到DOM:

scope.$apply();

假设您想访问元素的作用域

<div ng-controller="hw"></div>

你可以在控制台中使用以下命令:

angular.element(document.querySelector('[ng-controller=hw]')).scope();

这将为您提供该元素的范围。

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

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

只需在作用域外定义一个JavaScript变量，并将其分配到控制器中的作用域:

var myScope;
...
app.controller('myController', function ($scope,log) {
     myScope = $scope;
     ...

就是这样!它应该可以在所有浏览器中工作(至少在Chrome和Mozilla中测试)。

它正在工作，我正在用这个方法。

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

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

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

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

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

要添加和增强其他答案，在控制台中输入$($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代码的提示和技巧。

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

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

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

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

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

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

在angular中，我们通过angular.element()....获取jquery元素 让c…

.scope angular.element () ();

例子:

<div id=“”></div>

在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();

我是这样使用它的。

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

这也需要安装jQuery，但是非常适合开发环境。它查看每个元素以获得作用域的实例，然后返回带有控制器名称的实例。它还删除了任何以$开头的属性，这是angularjs通常用于配置的属性。

let controllers = (extensive = false) => {
            let result = {};
            $('*').each((i, e) => {
                let scope = angular.element(e).scope();
                if(Object.prototype.toString.call(scope) === '[object Object]' && e.hasAttribute('ng-controller')) {
                    let slimScope = {};
                    for(let key in scope) {
                        if(key.indexOf('$') !== 0 && key !== 'constructor' || extensive) {
                            slimScope[key] = scope[key];
                        }
                    }
                    result[$(e).attr('ng-controller')] = slimScope;
                }
            });

            return result;
        }

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

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

angular.element .scope (0) ()

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

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

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

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

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

同样，我们可以像这样通过HTML元素的名称来访问作用域: angular.element (document.getElementsByName (onboardingForm) [0]) .scope ()