角度控制器在初始化時調用了10次

我處於學習AngularJS的早期階段，並且看到一種奇怪的行爲。當我的頁面加載時，關聯的控制器被調用10次。我在這裏有一個fiddle，它揭示了行爲。當你在輸入框中輸入一個字符時，你會看到它被稱爲另一個11次。角度控制器在初始化時調用了10次

<html> 
<head> 
<script 
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script> 
    <script type="text/javascript"> 
     var HelloCtrl = function($scope) { 
      var keysTyped = 0; 
      $scope.name = 'World'; 

      $scope.i = function() { 
       return keysTyped++; 
      }; 
     } 
</script>Angular controller being called 10 times on init 
</head> 
<body ng-app> 
    <div ng-controller="HelloCtrl"> 
     Say hello to: <input type="text" ng-model="name"/><br/> 
     <h1>Characters typed, {{i()}}!</h1> 
    </div> 
</body> 
</html>

來源

2014-05-02 stanlick

您在代碼中遇到的問題稱爲無限摘要循環。當你點擊按鈕時，你不只是返回一個值，而是同時更新它，這會觸發另一個觸發另一個摘要循環的摘要循環，依此類推。這可能會發生多達10次，並在它發生錯誤後。如果您檢查您添加的小提琴上的控制檯，您將看到控制檯上的錯誤。

看看angularjs的文檔。

來源

2014-05-02 15:02:10 Constantinos

首先，您看到它被正確調用了10次，因爲這是可以在角引發異常之前運行的$ digest循環的限制次數。

這通常發生在渲染過程中更改對象屬性時。這將觸發一個新的渲染，因此一個循環將導致「10 $ digest（）迭代到達。中止！」錯誤。（又名無限$消化循環）

就可以解決這個改變你的代碼如下：

 $scope.keysTyped = 0; 

    $scope.i = function() { 
     $scope.keysTyped++; 
    };

我所做的事情無非是利用的：

<div ng-controller="HelloCtrl"> 
      Say hello to: <input type="text" ng-model="name" ng-change="i()"/><br/> 
    <h1>Characters typed, {{keysTyped}}!</h1> 
</div>

和控制器上Angular的雙向綁定解決了這個問題。

我已經把你的代碼和修改它，只是爲了使其工作，並解釋爲什麼你得到一個無限$摘要循環。

如果你想要的是有輸入字段中的字符計數，所有你需要做的是這樣的：

<body ng-app=""> 
     <div ng-controller="HelloCtrl"> 
      Say hello to: <input type="text" ng-model="name"/><br/> 
    <h1>Characters typed, {{name.length || 0}}!</h1> 
     </div> 
    </body>

你並不需要一個函數來計算的字符。

來源

2014-05-02 15:06:33

完美的安東尼奧！感謝兄弟 – stanlick

很高興工作:) –

角度控制器在初始化時調用了10次

回答

相關問題