javascript - 每 x 秒从服务器刷新一次 ng-repeat 列表

Question

如标题所示，我希望能够每 30 秒左右从服务器刷新一次 ng-repeat 列表。可以在后端添加更多数据，所以我希望我的列表能够反射(reflect)这一点。现在我的常规 $http.get( ) 工作正常，它在这里:

$scope.select = function() {
  $scope.searchText = '';
  $scope.selectedItem = null;
  var url = 'http:xxxxxxxxxxxx.com';
  url += $scope.selectModel.name;
  console.debug("GOING TO: " + url);
  $http.get(url).success(function(data2) {
    $scope.records = [];
    data2.forEach(function(r) {
        $scope.records.push(r);
    });
  });
};

它提供的网页部分是:

<div style="margin: 1em">
<h4>Search</h4>
        <div role="form">
            <!-- start dropdown -->
            <div class="form-group">
                <select class="form-control" ng-options="model as model.name for model in allModels" ng-model="selectModel" ng-change="select()">
                    <option value="">Choose Model</option>
                </select>
            </div>
            <!-- /end dropdown-->
            <div class="form-group">
                <input id="start_date" type="text" class="form-control" placeholder="Threat Date">
            </div>
        </div>
    <div>
        <table class="table table-hover table-striped" ng-show="records">
            <thead>
                <th>#</th>
                <th>Name</th>
                <th>Score</th>
            </thead>
            <tr data-ng-repeat=" item in records | orderBy : '-score' | limitTo : 10 " ng-click="moreInfo(item)">
                <td>{{$index+1}}</td>
                <td>{{item.name.slice(5)}}</td>
                <td>{{item.score.toFixed(3)}}</td>
            </tr>
        </table>
    </div>
</div>

有没有办法选择列表刷新的时间@？而且它必须没有点击刷新按钮或类似的东西。提前致谢。

编辑 这是我按照建议尝试使用 $interval 时遇到的错误:

ReferenceError: $interval is not defined
    at Scope.$scope.select (http:xxxxxxxxxx.com/UserQuery/js/script.js:24:7)
    at fn (eval at <anonymous> (https://code.angularjs.org/1.4.0-rc.0/angular.js:12822:15), <anonymous>:2:209)
    at Scope.$get.Scope.$eval (https://code.angularjs.org/1.4.0-rc.0/angular.js:15465:28)
    at https://code.angularjs.org/1.4.0-rc.0/angular.js:21825:13
    at https://code.angularjs.org/1.4.0-rc.0/angular.js:24485:9
    at forEach (https://code.angularjs.org/1.4.0-rc.0/angular.js:332:20)
    at NgModelController.$$writeModelToScope (https://code.angularjs.org/1.4.0-rc.0/angular.js:24483:5)
    at writeToModelIfNeeded (https://code.angularjs.org/1.4.0-rc.0/angular.js:24476:14)
    at https://code.angularjs.org/1.4.0-rc.0/angular.js:24470:9
    at validationDone (https://code.angularjs.org/1.4.0-rc.0/angular.js:24398:9)

解决方案 通过这个问题和另一个问题的共同努力，我找到了解决方案。首先，就像很多人提到的这个问题一样，这里的关键是 $interval 的使用。不过，有一些重要的事情不要使用它。

• 它必须包含在 Controller 的依赖项中 提到了@mcpDESIGNS。

• 在我的例子中，有一个下拉菜单用于我想要的多个东西 到 $interval 结束，打开一个新的时关闭一个很重要 一。

  $scope.select = function() {
        $scope.searchText = '';
        $scope.selectedItem = null;
        $interval.cancel(mainInterval);
        $scope.url = '';
        url = 'http:xxxxxxxxxxxxxx.com';
        url += $scope.selectModel.name;
        console.debug("GOING TO: " + url);
        $http.get(url).success(function(data2) {
          $scope.records = [];
          data2.forEach(function(r) {
            $scope.records.push(r);
          });
        });     
        mainInterval = $interval(function() {
          console.debug("UPDATING....");
          console.debug("GETTING NEW FROM " + url);
          $http.get(url).success(function(data2) {
            $scope.records = [];
            data2.forEach(function(r) {
              $scope.records.push(r);
            });
          });
        }, 5000);
      };

Answer 1

看看这个:

https://docs.angularjs.org/api/ng/service/$interval

它包装了 JavaScript 的原生 setInterval 函数。您可以将其设置为每 30 秒进行一次轮询。

它还会返回一个 promise ，以便您可以在需要时取消间隔。

但是，请记住这一点:

“由该服务创建的间隔必须在您完成它们时显式销毁。特别是当 Controller 的范围或指令的元素被销毁时，它们不会自动销毁。您应该考虑到这一点并确保始终在适当的时候取消间隔。有关如何以及何时执行此操作的更多详细信息，请参见下面的示例。”

编辑

获取您的代码:

$scope.select = function() {
  $scope.searchText = '';
  $scope.selectedItem = null;
  var url = 'http:xxxxxxxxxxxx.com';
  url += $scope.selectModel.name;
  console.debug("GOING TO: " + url);
  $http.get(url).success(function(data2) {
    $scope.records = [];
    data2.forEach(function(r) {
        $scope.records.push(r);
    });
  });
};

试着改成这样:

    $scope.select = function() {
      $scope.searchText = '';
      $scope.selectedItem = null;
      var url = 'http:xxxxxxxxxxxx.com';
      url += $scope.selectModel.name;
      console.debug("GOING TO: " + url);
      $http.get(url).success(function(data2) {
        $scope.records = [];
        data2.forEach(function(r) {
            $scope.records.push(r);
        });
      });
      $interval(function() {
        $http.get(url).success(function(data2) {
        $scope.records = [];
        data2.forEach(function(r) {
            $scope.records.push(r);
        });
      });
    }, 30000);
};

如果可行，您可以将实际的 $http.get 重构为命名函数以消除代码味道。