AngularJS ngcontroller 定期重新加载数据 [英] AngularJS ngcontroller to be reloading data periodically

问题描述

我有一个 angularJS 应用程序的工作实现，它从 URL 获取一些链接并绘制它们.但是 URL 上的链接会不断更新，我想定期更新此 $scope.listlinks，比如说每 10 秒更新一次.

我尝试玩 setInterval ，但没有运气.

Javascript

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

HTML

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

解决方案

虽然 jvandemo 的回答会起作用，但我认为它可以稍微改进.通过使用 setInterval，它打破了 Angular 遵循的依赖注入约定，并使控制器的单元测试变得困难.

Angular 目前不通过其内置服务支持 setInterval，但您可以使用 $timeout 服务来产生相同的功能.我会把控制器改成这样:

app.controller('MainCtrl', function($scope, $http, $timeout) {//获取数据的函数$scope.getData = function(){$http.get('style.css').success(function(data, status, headers, config) {//你的代码在这里console.log('获取数据！');});};//使用 $timeout 服务复制 setInterval 的函数.$scope.intervalFunction = function(){$超时(功能(){$scope.getData();$scope.intervalFunction();}, 1000)};//开始间隔$scope.intervalFunction();});

I have this working implementation af a angularJS app which fetches some links from an URL and paint them. However the links on the URL are being updated constantly, I would like to update periodcially this $scope.listlinks, let say every 10 seconds.

I tried playing with setInterval with no luck.

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>

解决方案

While jvandemo's answer will work, I think it can be improved slightly. By using setInterval, it breaks the dependency injection convention that Angular follows and makes unit testing of the controller difficult.

Angular doesn't currently support setInterval through its built-in services, but you can use the $timeout service to produce the same functionality. I'd change the controller to this:

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();

});

这篇关于AngularJS ngcontroller 定期重新加载数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！