关于javascript：AngularJS：如何从控制台编辑$ scope？


AngularJS : How to edit $scope from the console?

本问题已经有最佳答案，请猛点这里访问。

我可以根据这里接受的答案访问$scope变量。但是，我无法从控制台编辑它，即更改属性、调用函数等。这是否可能？

以下是我一直在试验的测试代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html data-ng-app="Foo">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">
    <script type="text/javascript">
      var app = angular.module("Foo", []);
      app.controller("One", ["$scope", function($scope) {
        $scope.text ="hello";
      }]);
   
  </head>
  <body>
   
      {{ text }}
    <!-- #container -->
  </body>
</html>

如果我使用控制台编辑text属性，它会更改，但视图不会更改：

1
2
3
4
> angular.element($("#container")).scope().text
<"hello"
> angular.element($("#container")).scope().text = 'bye'
<"bye"

如何从控制台更改$scope值和属性，以便视图和所有依赖项也得到更新？

相关讨论

从外部角度上下文更新的任何范围变量都不会更新它的绑定，您需要在使用将调用$digest方法的scope.$apply()更新范围值之后运行摘要循环，并且所有绑定都将在HTML上更新。

1
2
 angular.element($("#container")).scope().text
 angular.element($("#container")).scope().$apply()

Note:- You should add jQuery file in order to make it working.

相关讨论