如何使用AngularJS在浏览器控制台中访问$ scope变量?

时间:2012-12-06 11:52:41

标签: angularjs angularjs-scope

我想在Chrome的JavaScript控制台中访问我的$scope变量。我该怎么做?

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

19 个答案:

答案 0 :(得分:1695)

在开发人员工具的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来打开 show 模式中的小提琴。如果这样运行,您可以访问angular全局。你可以在这里试试:

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

jQuery Lite

如果在AngularJS之前加载jQuery,angular.element可以传递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/

答案 1 :(得分:179)

改善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所述)是在“元素”选项卡中单击它,它会自动存储为$0

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

答案 2 :(得分:71)

如果您已安装Batarang

然后你可以写:

$scope

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

答案 3 :(得分:34)

这是一种在没有Batarang的情况下进入范围的方法,你可以这样做:

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

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

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

在对模型进行更改后,您需要通过调用以下内容将更改应用于DOM:

scope.$apply();

答案 4 :(得分:29)

你控制器的某个地方(通常最后一行是一个好地方),放

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。我在Chrome中的jsFiddle上出现此错误:

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

答案 5 :(得分:10)

对于其中许多答案的一个警告:如果您对控制器进行别名,则范围对象将位于scope()返回的对象中的对象中。

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

答案 6 :(得分:8)

我同意Batarang选择一个对象后它是$scope(与angular.element($0).scope()相同,或者更简洁:$($0).scope()(我最喜欢的))

此外,如果像我一样,您拥有body元素的主要范围,$('body').scope()工作正常。

答案 7 :(得分:5)

要添加和增强其他答案,请在控制台中输入$($0)以获取该元素。如果它是Angularjs应用程序,默认情况下会加载jQuery lite版本。

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

angular.element($0).scope()

要检查您是否拥有jQuery和版本,请在控制台中运行此命令:

$.fn.jquery

如果您已检查过某个元素,则可通过命令行API引用$ 0获取当前选定的元素。 Firebug和Chrome都有这个参考。

但是,Chrome开发人员工具将使用这些引用提供通过名为$ 0,$ 1,$ 2,$ 3,$ 4的属性选择的最后五个元素(或堆对象)。最近选择的元素或对象可以引用为$ 0,第二个最近的引用为$ 1,依此类推。

以下是列出其引用的Command Line API reference for Firebug

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

您可以使用的其他一些东西是:

  • 查看元素父作用域:

$($0).scope().$parent

  • 你也可以链接这个:

$($0).scope().$parent.$parent

  • 您可以查看根范围:

$($0).scope().$root

  • 如果您使用隔离范围突出显示指令,则可以使用以下命令查看:

$($0).isolateScope()

有关详细信息和示例,请参阅Tips and Tricks for Debugging Unfamiliar Angularjs Code

答案 8 :(得分:4)

我过去曾使用angular.element($(".ng-scope")).scope();并且效果很好。只有在页面上只有一个应用程序范围,或者您可以执行以下操作时才会这样做:

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

答案 9 :(得分:4)

只需将$scope指定为全局变量即可。问题解决了。

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

我们实际上在开发中需要$scope而不是在生产中。

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

答案 10 :(得分:4)

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

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

答案 11 :(得分:3)

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

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

$ 0当前是chrome DOM检查器中的选定项目。 $ 1,$ 2 ..等等是之前选择的项目。

答案 12 :(得分:2)

假设您想要访问元素的范围,如

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

您可以在控制台中使用以下内容:

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

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

答案 13 :(得分:0)

在代码中放置一个断点,该断点靠近$ scope变量的引用(这样$ scope就在当前&#39;普通的JavaScript&#39;范围内)。然后你可以检查控制台中的$ scope值。

答案 14 :(得分:0)

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

  

angular.element().scope();

示例:

<div id=""></div>

答案 15 :(得分:0)

在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的控制台 enter image description here

答案 16 :(得分:0)

仅出于调试目的,我将其放在控制器的开头。

   window.scope = $scope;

  $scope.today = new Date();

这就是我的用法。

enter image description here

然后在完成调试后将其删除。

答案 17 :(得分:0)

这也需要安装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;
        }

答案 18 :(得分:-5)

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

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

就是这样!它应该适用于所有浏览器(至少在Chrome和Mozilla中测试过)。

它正在运行,我正在使用这种方法。