我如何访问$范围变量在浏览器的控制台使用AngularJS?

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

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

当前回答

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

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

其他回答

检查元素，然后在控制台中使用它

s = $($0).scope()
// `s` is the scope object if it exists

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

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

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

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

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

scope.$apply();

对于这些答案有一个警告:如果你对控制器进行了别名，那么你的作用域对象将位于scope()返回的对象中的一个对象中。

例如，如果你的控制器指令是这样创建的: <div ng-controller="FormController as frm"> 然后访问控制器的startDate属性，调用angular.element($0).scope().frm.startDate

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

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

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

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

假设您想访问元素的作用域

<div ng-controller="hw"></div>

你可以在控制台中使用以下命令:

angular.element(document.querySelector('[ng-controller=hw]')).scope();

这将为您提供该元素的范围。

推荐文章