Javascript angular js按间隔更新json并更新视图

Javascript angular js按间隔更新json并更新视图,javascript,json,angularjs,Javascript,Json,Angularjs,我一直在尝试在internet上找到一个解决方案,以便能够在设置的时间间隔内更新我的$http json请求,同时让它用新数据更新我的绑定 我看到过一些使用$timeout的例子,但是没有能够让它工作,我只是想知道最好的方法是什么。此外,能够使用下拉的新数据更新视图似乎是我无法解决的问题,因为我无法提出新的请求 这是我当前的版本 js文件,这只是显示json的初始获取 var myApp = angular.module('myApp', ['ngRoute']); myApp

我一直在尝试在internet上找到一个解决方案,以便能够在设置的时间间隔内更新我的$http json请求,同时让它用新数据更新我的绑定

我看到过一些使用$timeout的例子,但是没有能够让它工作,我只是想知道最好的方法是什么。此外,能够使用下拉的新数据更新视图似乎是我无法解决的问题,因为我无法提出新的请求

这是我当前的版本

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>
  • {{day.Date}
  • {{item.Name}}

我会使用
$timeout

正如您所知,
$timeout
返回承诺。所以,当promise得到解决时,我们可以再次调用方法
myLoop

在下面的示例中,我们每10秒调用一次http

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(计时器)


演示

我不明白你想达到什么目的。从您的示例中,可以调用返回
Days
对象的http异步调用。
ngRepeat
指令监听
Days
change(有私人观察者)并显示新数据。有什么问题吗?谢谢,我从服务器请求的json数据一直在更新,我觉得我需要设置一个超时函数来调用$http来获取更新的json数据,然后更新当前视图。也许我对角度的工作原理还是有点误解。很抱歉。据我所知,您希望在循环http中运行一些延迟,对吗?是的,就像轮询器一样。每x秒请求一次json,然后在数据发生更改时更新视图。使用$interval在生效几分钟后执行函数。。。fir您的需求推送服务比$intervalIs好使用$timeout比使用$interval有好处吗?@Anks在我们的例子中,我认为
$timeout
更好,因为您的方法是异步调用。确实,
$interval
更便宜,您可以将标志设置为不触发摘要循环。然而,在我们的例子中,我们只有在得到成功回调时才触发下一个调用。如果请求失败或卡住会发生什么情况,
$interval
将继续迭代http调用。所以你可以选择更好的。
// 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);
});