我想访问我的$范围变量在Chrome的JavaScript控制台。我怎么做呢?
我既不能看到$scope也不能看到我的模块myapp的名称在控制台中作为变量。
我想访问我的$范围变量在Chrome的JavaScript控制台。我怎么做呢?
我既不能看到$scope也不能看到我的模块myapp的名称在控制台中作为变量。
当前回答
你可以先从DOM中选择一个在你想要检查的范围内的元素:
然后你可以通过在控制台中查询以下命令来查看作用域对象:
angular.element .scope (0) ()
你可以查询范围内的任何属性,例如:
.widgets angular.element(0)美元.scope ()
或者你可以检查附在范围上的控制器:
心理图像元素(0.06美元)。范围(myControllerName美元)。
(另一种可行的方法是在代码中添加断点。如果$scope目前在当前的“普通旧JavaScript”范围内,那么你可以在控制台中检查$scope的值。)
其他回答
检查元素,然后在控制台中使用它
s = $($0).scope()
// `s` is the scope object if it exists
在开发人员工具的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/
我使用了angular.element($(".ng-scope")).scope();在过去,它工作得很好。如果你在页面上只有一个应用范围,那就好了,或者你可以这样做:
angular.element ($ (" div [ng-controller = controllerName] ")) .scope ();或angular.element (document.getElementsByClassName(“ng-scope”).scope ();
这也需要安装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;
}
只需将$scope赋值为全局变量。问题解决了。
app.controller('myCtrl', ['$scope', '$http', function($scope, $http) {
window.$scope = $scope;
}
实际上,我们在开发中比在生产中更需要$scope。
@JasonGoemaat已经提到了,但添加它作为这个问题的合适答案。