我想在Chrome的JavaScript控制台中访问我的$scope
变量。我该怎么做?
我既不能在控制台中看到$scope
也不能看到我的模块myapp
的名称作为变量。
答案 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
答案 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
答案 16 :(得分:0)
答案 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中测试过)。
它正在运行,我正在使用这种方法。