奇怪的 AngularJS 行为，值不在 DOM 中更新答案

【问题标题】：Strange AngularJS behavior, values not updating in DOM奇怪的 AngularJS 行为，值不在 DOM 中更新
【发布时间】：2015-10-10 17:59:20
【问题描述】：

我在我的应用程序中遇到了一些问题，我使用 setInterval 每 X 秒轮询一次服务器以检查新消息，当它找到它们时，它会将它们添加到应用程序的 SQLite 数据库中并更新包含屏幕上位移数据的对象。

问题在于这些值不会自动更新，您可以在下面通过此 sn-p 提供的示例中看到。只需单击该按钮，您就会很快注意到ng-repeat 或标准{{variable}} 显示中没有发生任何事情。

再次点击按钮，突然间你有了一些结果，但它们不一致且具有爆炸性。

var app = angular.module('app', [])
  .controller('Ctrl', function($scope) {

    $scope.console = "";
    $scope.arr = [];

    $scope.init = function() {
      setInterval(function() {
        $scope.arr.push("Value");
      }, 1000);
    };

    $scope.start = function() {
      alert("Started");
      $scope.init();
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>

<div ng-app="app" ng-controller="Ctrl">

  <button ng-click="start()">Start Example</button>
  <br>

  <h5>For each:</h5>

  <div id="repeat-container" ng-repeat="x in arr">
    Value index: {{$index}}
    <br>
  </div>

  <hr>Updating value of array: {{arr}}

  <hr>

  <h5>Console:</h5>
  {{console}}

  <div>

我亲自与ng-repeat 合作，试图让这些值在通过setInterval 更新时正确显示。我在那里添加了一个自定义调试控制台，考虑到console.log 在 sn-ps 上没有显示任何内容（除非它在调试窗口中，我没有检查过，因为我是个白痴）。

他们为什么不更新？通常，Angular 在保持页面上的所有内容更新并与范围内的值同步方面做得非常好。

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

基本上setInterval 会创建 angular 不监视的事件，因此请使用 angular 等效项 $timeout，因为这会触发摘要循环。您可能需要将 $timeout 放在一个单独的函数中，以便它可以重复调用自己，从而为您提供 setInterval 的等效项。

var app = angular.module('app', [])
  .controller('Ctrl', function($scope, $timeout) {

    $scope.console = "";
    $scope.arr = [];

    $scope.init = function() {
      $timeout(function() {
        $scope.arr.push("Value");
      }, 1000);
    };

    $scope.start = function() {
      alert("Started");
      $scope.init();
    };
  });

【讨论】：

你的回答引起了我的兴趣，我找到了$intervaldocs.angularjs.org/api/ng/service/$interval
好东西。 $interval 是你需要的。我只是忘记了它
我将其标记为正确，因为它解释了问题所在，并提供了解决方案。如果您想编辑包含有关$interval 的信息以供将来的查看者使用，那很好。

【解决方案2】：

使用 setTimeout 和 setInterval 会导致范围释放更新状态免费。您正在寻找的是 $scope. $apply() 或 $interval () 和 $timeout () 角度函数..

【讨论】：

【解决方案3】：

您应该尝试使用Angulars $interval service。我认为 common-js setInterval 没有得到正确的$scope?!

var app = angular.module('app', [])
  .controller('Ctrl', function($scope, $interval) {

    $scope.console = "";
    $scope.arr = [];

    $scope.init = function() {
      $interval(function() {
        $scope.arr.push("Value");
      }, 1000);
    };

    $scope.start = function() {
      alert("Started");
      $scope.init();
    };
  });

更多信息here：

【讨论】：