我讀到 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 嗎？
我在這里錯過了什么嗎？
謝謝你。
uj5u.com熱心網友回復：
為了讓它像你期望的那樣開箱即用，AngularJS 需要做兩件事之一：
- 在每次更改時重新處理所有內容，這將是性能噩夢，或者
- 足夠聰明，知道某些范圍屬性何時依賴于其他范圍屬性的值，并且只重新處理那些相關的屬性，這將非常復雜。
呈現總是需要重新運行的結果的簡單方法是使其成為函式而不是屬性的結果。
$scope.multipleBy2 = () => $scope.number * 2;
雖然系結到函式結果的 AngularJS 運算式將始終在摘要回圈上重新運行，但它實際上不會重新渲染相應元素的 DOM，除非摘要之間的值發生變化，因此幸運的是，這里進行了一些優化。
作為最佳實踐，這些函式在運行時不應改變 $scope 的狀態，否則您可能會遇到無限摘要回圈問題。
$scope.multipleBy2 = () => $scope.number * 2;
// infinite $digest loop error
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/377684.html
上一篇：列舉回傳int而不是字串C#