javascript - AngularJS ngcontroller 将定期重新加载数据

Question

我有一个 angularJS 应用程序的工作实现，它从 URL 中获取一些链接并绘制它们。然而，URL 上的链接会不断更新，我想定期更新此 $scope.liSTLinks，假设每 10 秒更新一次。

我尝试使用 setInterval 但没有成功。

Javascript

var App = angular.module('App', []);
App.controller('ListLinksCtrl', 
function get($scope, $http ) {
  $http.get('http://example_url.com/my_changing_links_json').then(
       function(res){$scope.listlinks = res.data;});
}
);

HTML

<div id="cnt1" ng-controller="ListLinksCtrl">
   <div ng-repeat="singlelink in listlinks">
        <a href="{{ singlelink.url }}"> 
           {{ singlelink.destination }} 
        </a>
   </div>
</div>

Answer 1

虽然jvandemo的答案可行，但我认为它可以稍微改进。通过使用 setInterval，它打破了 Angular 遵循的依赖注入(inject)约定，并使 Controller 的单元测试变得困难。

Angular 目前不通过其内置服务支持 setInterval，但您可以使用 $timeout 服务来生成相同的功能。我会将 Controller 更改为:

app.controller('MainCtrl', function($scope, $http, $timeout) {

  // Function to get the data
  $scope.getData = function(){
    $http.get('style.css')
      .success(function(data, status, headers, config) {

      // Your code here
      console.log('Fetched data!');
    });
  };

  // Function to replicate setInterval using $timeout service.
  $scope.intervalFunction = function(){
    $timeout(function() {
      $scope.getData();
      $scope.intervalFunction();
    }, 1000)
  };

  // Kick off the interval
  $scope.intervalFunction();

});