與angularJS混淆

我是angularJS的新手，最近開始學習它。我有以下的測試程序 -與angularJS混淆

<!DOCTYPE html> 
 
<html lang="en-US"> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<body ng-app="rAPP"> 
 
    <input type="text" ng-model="mod" ng-init="mod='value1'" /> 
 

 
    <div ng-controller="testController"> 
 
    <input type="hidden" id="testInput" ng-model="testInput" ng-init="testInput='value'" />{{ testInput }} 
 
    <span ng-bind="mod"></span> 
 
    </div> 
 

 

 
    <script> 
 
    angular.module('rAPP', []) 
 
     .controller('testController', ['$scope', 
 
     function($scope) { 
 
      alert(testInput); 
 
      var counter = 0; 
 

 
      $scope.$watch("mod", function() { 
 
      counter += 1; 
 
      $scope.mod = counter; 
 
      alert(counter); 
 
      }); 
 
     } 
 
     ]); 
 
    </script> 
 
</body> 
 

 
</html>

當我執行它，每次我在文本輸入的東西通過11.鍵入，計數器增加例如，一旦應用程序加載時，值在文本框中是value1，計數器是11。接下來，當我在文本框中進行任何修改時，該值將跳轉到22.無法理解爲什麼會發生這種情況。我的直覺是，可能在內部，鐘錶聽衆被稱爲11次。所以，我試着把一個警報聲明放在偵聽器函數中，並預期會顯示11次，但它只顯示一次

來源

2016-02-05 Raja Chowdhury

它對我來說顯示了11倍 –

你有循環依賴。你*觀看*'mod'，但你可以在手錶處理程序中改變它。 – Jeroen

對不起，請刪除此行 - $ scope.mod = counter; –

你需要有PARAMS該驗證舊的價值是從過去的值不同，所以它增加只有一次，當值改變

<!DOCTYPE html> 
 
<html lang="en-US"> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<body ng-app="rAPP"> 
 
    <input type="text" ng-model="mod" ng-init="mod='value1'" /> 
 
    <div ng-controller="testController">{{ testInput }} 
 
     <span ng-bind="mod"></span> 
 
    </div> 
 

 

 
    <script> 
 
    angular.module('rAPP', []) 
 
     .controller('testController', ['$scope', 
 
     function ($scope) { 
 
      var counter = 0; 
 

 
      $scope.$watch("mod", function (newVal, oldVal) { 
 
       if (typeof newVal !== oldVal) { 
 
        counter++; 
 
        alert("counter=" + counter); 
 
       } 
 
      }); 
 
     } 
 
     ]); 
 
</script> 
 
</body> 
 

 
</html>

來源

2016-02-05 11:41:37

您的問題是無限循環。

錯誤：$ rootScope：infdig 無限$消化循環

10 $digest() iterations reached. Aborting!

觀察家在過去的5次迭代解僱：[{ 「味精」：「國防部」，「的newval」：6，「OLDVAL」：5}，{ 「msg」中：「MOD」，「的newval」：7，「OLDVAL」：6}]，[{ 「msg」中：「MOD」，「的newval」：7，「OLDVAL」：6}， { 「msg」中：「MOD」，「的newval」：8中，「OLDVAL」：7}]，[{ 「msg」中：「MOD」，「的newval」：8中，「OLDVAL」：7}，{ 「msg」中：「MOD」，「的newval」：9 「OLDVAL」：8}]，[{ 「msg」中：「MOD」，「的newval」：9 「OLDVAL」：8}，{ 「msg」中：「MOD」「的newval」：10 「OLDVAL」：9}]，[{ 「msg」中：「MOD」，「的newval」：10 「OLDVAL」：9}，{ 「msg」中：「MOD」，「的newval」：11，「oldVal」：10}]]

這就是爲什麼它是未來 10 + 1爲

Lokk的鏈接，瞭解更多信息：Angular Error

來源

2016-02-05 11:39:18

哦，是有了！

Error: $rootScope:infdig 
Infinite $digest Loop

This error occurs when the application's model becomes unstable and each $digest cycle triggers a state change and subsequent $digest cycle.

10 $digest() iterations reached. Aborting! 
Watchers fired in the last 5 iterations: [[{"msg":"mod","newVal":6,"oldVal":5},{"msg":"mod","newVal":7,"oldVal":6}],[{"msg":"mod","newVal":7,"oldVal":6},{"msg":"mod","newVal":8,"oldVal":7}],[{"msg":"mod","newVal":8,"oldVal":7},{"msg":"mod","newVal":9,"oldVal":8}],[{"msg":"mod","newVal":9,"oldVal":8},{"msg":"mod","newVal":10,"oldVal":9}],[{"msg":"mod","newVal":10,"oldVal":9},{"msg":"mod","newVal":11,"oldVal":10}]]

Angular Documentation Link

快樂幫助！

來源

2016-02-05 11:45:05

與angularJS混淆

回答

相關問題