AngularJS：試圖了解 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 屬性何時依賴於其他 scope 屬性的值，並且只重新處理那些相關屬性，這將非常復雜。

呈現始終需要新鮮運行的結果的簡單方法是使其成為 function 而不是屬性的結果。

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

雖然與 function 結果綁定的 AngularJS 表達式將始終在摘要循環上重新運行，但它實際上不會重新渲染相應元素的 DOM，除非摘要之間的值發生變化，因此值得慶幸的是發生了一些優化。

作為最佳實踐，這些函數不應在運行時改變 $scope 的 state，否則您可能會陷入無限摘要循環問題。

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

AngularJS：試圖了解 Angular 上下文和觀察者

問題描述

1 個解決方案

解決方案1
1 已采納 2021-12-07 14:11:39

AngularJS：試圖了解 Angular 上下文和觀察者

問題描述

1 個解決方案

解決方案1 1 已采納 2021-12-07 14:11:39

解決方案1
1 已采納 2021-12-07 14:11:39