AngularJS : 如何从控制台编辑 $scope？

Question

我能够根据接受的答案 here 访问 $scope 变量。但是，我无法从控制台对其进行编辑，即更改属性、调用函数等。这甚至可能吗？

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

<!doctype html>
<html data-ng-app="Foo">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script type="text/javascript">
      var app = angular.module("Foo", []);
      app.controller("One", ["$scope", function($scope) {
        $scope.text = "hello";
      }]);
    </script>
  </head>
  <body>
    <div id="container" ng-controller="One">
      {{ text }}
    </div><!-- #container -->
  </body>
</html>

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

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

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

Answer 1

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

上更新

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

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

AngularJS : 如何从控制台编辑 $scope？

AngularJS : How to edit $scope from the console?

javascript

angularjs

angularjs-digest