Javascript angular js按间隔更新json并更新视图
我一直在尝试在internet上找到一个解决方案,以便能够在设置的时间间隔内更新我的$http json请求,同时让它用新数据更新我的绑定 我看到过一些使用$timeout的例子,但是没有能够让它工作,我只是想知道最好的方法是什么。此外,能够使用下拉的新数据更新视图似乎是我无法解决的问题,因为我无法提出新的请求 这是我当前的版本 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
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);
});