试图了解 Angular 上下文和观察者

Question

我读到 AngularJS 有一个部署了观察者和消化循环的上下文。因此，如果从前端或后端更新任何变量，上述这些组件将有助于确保更新涉及该变量的所有相应字段。

所以我想测试一下，所以创建了一个乘以 2 的样本，如下所示

<!DOCTYPE html>
<html ng-app="myapp">
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js"></script>
  </head>

  <body>
    <div id="app"></div>
    <script>
      
    </script>
    <div class="container" ng-controller="maincontroller">
      <label id="input_value">Please enter number </label>
      <input type="text" id="input_value" ng-model="number" />

      <p>You have entered : {{ number }}</p>
      <p>
      Multiplied by 2 : {{ multipleBy2 }}
      </p>
      
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

我的index.js代码如下

var myapp = angular.module("myapp", []);
      var maincontroller = function ($scope) {
        $scope.number = "";
        
        $scope.multipleBy2 = $scope.number * 2; // this is returning zero at the beginning of the page.
        
      };
      myapp.controller("maincontroller", maincontroller);

如果我期望 number 输入字段收到 2 的那一刻，我应该看到 Multiplied by 2 : 为 4，这是错误的吗？

我在这里遗漏了什么吗？

Answer 1

为了使它像您期望的那样开箱即用，AngularJS 需要做以下两件事之一：

每次更改都重新处理所有内容，这将是性能噩梦，或者
足够聪明，知道某些范围属性何时依赖于其他范围属性的值，并且只重新处理那些相关的属性，这将非常复杂。

呈现始终需要运行新鲜的结果的简单方法是使其成为函数的结果而不是属性。

$scope.multipleBy2 = () => $scope.number * 2;

虽然绑定到函数结果的 AngularJS 表达式将始终在摘要循环中重新运行，但它实际上不会重新呈现相应元素的 DOM，除非摘要之间的值变化，所以值得庆幸的是发生了一些优化。

作为最佳实践，这些函数不应在运行时改变 $scope 的状态，否则您可能会陷入无限摘要循环问题。

$scope.multipleBy2 = () => $scope.number++ * 2;
// infinite $digest loop error

试图了解 Angular 上下文和观察者

Trying to understand Angular context & Watchers

javascript

angularjs