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

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


当前回答

你可以先从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 ();

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

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

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

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

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

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

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

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