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

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


当前回答

同样,我们可以像这样通过HTML元素的名称来访问作用域: angular.element (document.getElementsByName (onboardingForm) [0]) .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的控制台

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

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

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

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

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

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

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

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

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

scope.$apply();

在开发人员工具的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/

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

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

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

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