Подтвердить что ты не робот

AngularJS ngcontroller для периодической перезагрузки данных

У меня есть эта рабочая реализация в приложении 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>
4b9b3361

Ответ 1

Пока 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();

});

Ответ 2

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

Ответ 3

Вы можете использовать функцию 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

Надеюсь, что это поможет!

Ответ 4

Этот ответ основывается на ответе drew.walker, но делает так, что смена контроллеров не будет порождать множество бесконечно быстро обновляющихся обновлений. Он также запускает getData сразу, вместо того, чтобы откладывать его на 1 секунду.

Это зависит от того, как вы используете маршруты Angular и устанавливаете Ctrls в них. Если вы этого не сделаете, вам понадобится другой способ определить, находится ли этот контроллер в области видимости.

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

});

Ответ 5

Мне пришлось изменить порядок, чтобы заставить его работать:

Из

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

к

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

В противном случае цикл выполняется только один раз

Ответ 7

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

Ответ 8

Лучшим решением является использование 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();
        });