我想访问我的$范围变量在Chrome的JavaScript控制台。我怎么做呢?
我既不能看到$scope也不能看到我的模块myapp的名称在控制台中作为变量。
我想访问我的$范围变量在Chrome的JavaScript控制台。我怎么做呢?
我既不能看到$scope也不能看到我的模块myapp的名称在控制台中作为变量。
当前回答
这也需要安装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已经提到了,但添加它作为这个问题的合适答案。
假设您想访问元素的作用域
<div ng-controller="hw"></div>
你可以在控制台中使用以下命令:
angular.element(document.querySelector('[ng-controller=hw]')).scope();
这将为您提供该元素的范围。
这是一种在没有Batarang的情况下获得瞄准镜的方法,你可以:
var scope = angular.element('#selectorId').scope();
或者如果你想通过控制器名找到你的作用域,这样做:
var scope = angular.element('[ng-controller=myController]').scope();
在你对你的模型做了更改之后,你需要通过调用以下命令将更改应用到DOM:
scope.$apply();
在控制器的某个地方(通常最后一行是一个好地方),放置
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
对于这些答案有一个警告:如果你对控制器进行了别名,那么你的作用域对象将位于scope()返回的对象中的一个对象中。
例如,如果你的控制器指令是这样创建的: <div ng-controller="FormController as frm"> 然后访问控制器的startDate属性,调用angular.element($0).scope().frm.startDate