Question

我有这个简单的标记：（jsbin）

  <div ng-app data-ng-controller="HelloWorldController">
    <div>
        <label>Message :
            <input ng-model="message">
        </label>
        <h1>{{message}}</h1>
    </div>
</div>

其中：

  function HelloWorldController($scope)
  { var i=0;
    setInterval(function (){i++; 
                            console.log("Hello World "+i);
                            $scope.message="Hello World "+i;},1000);

  }

在控制台中，向我显示间隔：

enter image description here

但在视图中 - 我没有看到它，我应该看到它：

enter image description here

问题：

我在这里缺少什么以及为什么它不会更新我的观点？

Answer 1

您需要手动输入角度摘要周期才能更新视图。在控制器中使用$ scope。$ apply：

function HelloWorldController($scope) {
  var i = 0;
  setInterval(function () {
    i++;
    console.log("Hello World " + i);
    $scope.$apply(function () {
      $scope.message = "Hello World " + i;
    });
  }, 1000);
}

Answer 2

你应该使用Angular的$timeout服务（我更喜欢这个，而不是手动导致Angular使用$scope.$apply来运行摘要周期）。您不希望Angular代码充斥着这些语句。

所以你的代码应该是（注意你必须注入超时服务）：

function HelloWorldController($scope, $timeout){ 
     var i=0;
     $timeout(function () {
          i++; 
          console.log("Hello World "+i);
          $scope.message="Hello World "+i;
        },1000);
}

Answer 3

您需要$应用您的范围。编辑您的代码如下

  function HelloWorldController($scope)
  { var i=0;
    setInterval(function (){i++; 
                            console.log("Hello World "+i);
                            $scope.message="Hello World "+i;
$scope.$apply();
},1000);

  }

Answer 4

如果你添加$ scope。$ apply（）;修改范围后，它将更新ui。

Answer 5

未发生申请。要在不使用apply的情况下执行此操作（并且间隔时间）您可以使用承诺，巧合$timeout默认使用这些承诺。为了使您的示例有效，您可以这样做：

function HelloWorldController($scope,$timeout){
    var i=0;
    (function doStuff() {
        i++;
        console.log("Hello World "+i);
        $scope.message="Hello World "+i;
        $timeout(doStuff, 1000);
    }());   
}

使用JSBin： http://jsbin.com/IWedoYiP/9/

使用超时。回调在promise中自动解决。这会导致摘要。自动更新视图。

Answer 6

简而言之，Angular不会调用setInterval。你需要调用$ scope。$ apply（），如本文所述：

http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

清楚地解释了目前的细节。

此外，正如文章中提到的，如果使用$ timeout而不是setInterval，则不必使用$ scope。$ apply。

Answer 7

使用setInterval angularjs不知道发生了什么你应该这样做

app.controller('HelloWorldController',function($scope){
               var i=0;
                setInterval(function (){i++; 
                    console.log("Hello World "+i);
                    $scope.$apply(function(){
                            $scope.message="Hello World "+i;
                        }
                    );   
               },1000);

        });

AngularJS：视图没有更新？

7 个答案: