angular JS обновляет json на интервале и обновляет представление

Я пытался найти решение в интернете, чтобы иметь возможность обновлять мой запрос $http json на заданное время интервала и в то же время обновлять мои привязки новыми данными.

Я видел несколько примеров использования $ timeout, но не смог заставить его работать и просто хотел знать, какой лучший подход будет для этого. Также возможность обновлять представления с новыми данными, снятыми, - это то, что я не могу решить, поскольку я не смог сделать новый запрос.

вот моя текущая сборка.

app.JS-файл, это просто показывает начальную выборку для json.

    var myApp = angular.module('myApp', ['ngRoute']);

    myApp.controller('MainCtrl', ['$scope', '$http',
        function($scope, $http, $timeout) {
            $scope.Days = {};

            $http({
                method: 'GET',
                url: "data.json"
            })
                .success(function(data, status, headers, config) {
                    $scope.Days = data;
                })
                .error(function(data, status, headers, config) {
                    // something went wrong :(
                });

        }
    ]);

настройка HTML:

<ul ng-controller="MainCtrl">
  <li class="date" ng-repeat-start="day in Days">
    <strong>>{{ day.Date }}</strong>
  </li>

  <li class="item" ng-repeat-end ng-repeat="item in day.Items">
    <strong>>{{ item.Name }}</strong>
  </li>
</ul>

1 ответов


Я хотел бы использовать $timeout.

как известно $timeout вернуться обещание. Поэтому, когда обещание разрешено, мы можем вызвать method myLoop еще раз.

в следующем примере мы вызываем http каждые 10 сек.

var timer;

function myLoop() {
    // When the timeout is defined, it returns a
    // promise object.
    timer = $timeout(function () {
        console.log("Timeout executed", Date.now());
    }, 10000);

    timer.then(function () {
        console.log("Timer resolved!");

        $http({
            method: 'GET',
            url: "data.json"
        }).success(function (data, status, headers, config) {
            $scope.Days = data;
            myLoop();
        }).error(function (data, status, headers, config) {
            // something went wrong :(
        });
    }, function () {
        console.log("Timer rejected!");
    });

}

myLoop();

в качестве примечания:

когда контроллер будет уничтожен, обязательно позвоните $timeout.cancel( timer );

// When the DOM element is removed from the page,
// AngularJS will trigger the $destroy event on
// the scope. 
// Cancel timeout
$scope.$on("$destroy", function (event) {
    $timeout.cancel(timer);
});

демо Скрипка