Question

执行For..Loops或While ..Loops不会更新$ scope变量。我试图在循环递增时显示进度。

我已阅读（http://jimhoskins.com/2012/12/17/angularjs-and-apply.html）我们需要使用$ apply强制更新，如果未通过事件或承诺（如ng-click（）事件或$ http调用检测到更改。

我尝试使用$ apply强制更新，但这似乎没有改变任何东西。

我尝试使用$ timeout，但测试结果再次为负。

在下面的代码中，我尝试了三种不同的测试。最初我尝试了一个For..loop，然后我尝试了一个while..loop然后一个while..loop和$ apply。这些测试是相互独立的，我已经将这三个测试都包含在内，只是为了向您展示我尝试过的变体。

var myApp = angular.module('myApp', []);

myApp.controller('CounterController', ['$scope', '$timeout', function($scope, $timeout) {


  $scope.counterMax = 5000;


  $scope.startCounter = function() {
    $scope.progress = 0;
    $scope.progress2 = 0;
    $scope.progress3 = 0;
    // for loop $scope test
    for (i = 0; i <= $scope.counterMax; i++) {

      $timeout(function() {
        $scope.progress = i;
      }, 500);
    }

    // while loop $scope test
    var x = 0;
    try {
      while (x < $scope.counterMax) {
        $timeout(function() {
          $scope.progress2 = x;
        }, 2);
        x++;

      }
    } catch (error) {
      console.log("Error: " + error);
    }



    // while loop $scope test with $apply
    x = 0;
    try {
      while (x < $scope.counterMax) {
        $timeout(function() {
          $scope.$apply(function() {
            $scope.progress3 = x;
          });
        }, 2000);
        x++;

      }
    } catch (error) {
      console.log("Error: " + error);
    }
  }

  $scope.startCounter();
}]);

视图

<div ng-controller="CounterController">
      <p>
        Depending on the value for the Counter Max, a loop will be made from zero to 
        the Counter Max value. 
        <br />
        The value in the Progress Indicators should increment gradually until the Counter Max value is reached.
        <br />
        Currently this is not happening. The Progress Indicators are only updated at the 
        end of the loop.
      </p>
      <p>
        Counter Max: <input type="text" ng-model="counterMax" ng-keyup="startCounter()"/>
      </p>
      <p>(for loop $scope test)<br />
      Progress Indicator 1: {{progress}}</p>

      <p>(while loop $scope test)<br />
      Progress Indicator 2: {{progress2}}</p>

      <p>(while loop $scope test with $apply)<br />
      Progress Indicator 3: {{progress3}}</p>
    </div>

你可以在plnkr上看到我在这里做的测试： http://plnkr.co/edit/Nl3GMy0DJNJ53PFObAq1?p=preview

Answer 1

注册超时的循环总是非常快，并且因为在每次迭代中传递给$timeout的延迟是相同的，所以它们将同时触发，并且视图看起来只会更新一次。

如果您希望视图中的数字逐渐增加，则传递给$timeout的延迟需要递增，如下例所示。此外，由于每次迭代都会永久更改i的值，因此请确保根据其当前值增加progress变量。

for (i = 0; i <= $scope.counterMax; i++) {
  $timeout(function() {
    $scope.progress++;
  }, i);
}

AngularJS循环不更新视图

1 个答案: