21

我有一个 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>
4

8 回答 8

28

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

Angular 目前不支持setInterval通过其内置服务，但您可以使用该$timeout服务来产生相同的功能。我将控制器更改为：

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

});
于 2013-08-24T10:49:59.623 回答
10

2016 年

$interval是为此制作的：

    $interval(function() {
        // your stuff          
    }, 1000);

不要忘记注入$interval你的控制器

app.controller('ExampleController', ['$scope', '$interval',function($scope, $interval) {
      $interval(function() {
            // your stuff          
      , 1000); 
}]);

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

于 2016-03-16T10:01:19.490 回答
4

您可以使用 setInterval 函数，但您需要将逻辑封装在这样的函数中：

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

  // 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!');
      });
  };

  // Run function every second
  setInterval($scope.getData, 1000);

});

我已经为您创建了一个工作 plnkr：http ://plnkr.co/edit/vNCbBm45VYGzEQ7cIxjZ?p=preview

希望有帮助！

于 2013-08-24T08:35:34.733 回答
2

这个答案建立在 draw.walker 的答案之上，但它使得更改控制器不会产生多个无休止的运行刷新。它也会getData立即运行，而不是延迟 1 秒。

这取决于您使用 Angular 路由并在其中设置 Ctrl。如果不这样做，则需要另一种方法来确定此控制器是否在范围内。

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

    // Function to get the data
    $scope.getData = function() {
        ...
    };

    // Get the data immediately, interval function will run 1 second later
    $scope.getData();

    // Function to replicate setInterval using $timeout service.
    $scope.intervalFunction = function() {
        var currentCtrl = $route.current.$$route.controller;
        var currentlyRunning = $rootScope.myAppMainCtrlRefreshRunning;
        //do not run if the MainCtrl is not in scope
        //do not run if we've already got another timeout underway (in case someone jumps back and forth between
        //controllers without waiting 1 second between)
        if (currentCtrl === "MainCtrl" && !currentlyRunning) {
            $timeout(function() {
                $rootScope.myAppMainCtrlRefreshRunning = true;
                $scope.getData();
                $scope.intervalFunction();
                $rootScope.myAppMainCtrlRefreshRunning = false;
            }, 1000);
        };
    };
    // Kick off the interval
    $scope.intervalFunction();

});
于 2014-06-23T21:50:45.960 回答
0

我必须更改才能使其工作：

从

$scope.intervalFunction();
$rootScope.myAppMainCtrlRefreshRunning = false;

到

$rootScope.myAppMainCtrlRefreshRunning = false;
$scope.intervalFunction();

否则循环只执行一次

于 2016-11-20T17:23:37.333 回答
0

您可以尝试使用 $q 提供程序来实现 promises/deferred。

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

于 2017-03-28T06:54:58.637 回答
0 
Try this it worked fine for me.

$scope.intervalFunction = function(){
     if ($location.$$absUrl === "current url") {
      $timeout(function() {
      $scope.showAllEmployeeTracking();
      $scope.intervalFunction();
      console.log("loading Interval")
    }, 10000)
    }
  };

  // Kick off the interval
  $scope.intervalFunction();
于 2017-09-26T09:48:36.403 回答
0

更好的解决方案是使用 Angular $interval和$destroy提供程序示例： 

var stop=$interval(function () {
            function_call();
        }, 12000)

        $scope.stopInterval = function () {
            if (angular.isDefined(stop)) {
                $interval.cancel(stop);
                stop = undefined;
            }
        };

        $scope.$on('$destroy', function () {
            // Make sure that the interval is destroyed too
            $scope.stopInterval();
        });
于 2017-11-06T11:05:03.893 回答