Question

刚刚完成Codeacademy教程，使用angular来循环遍历URL中的一些JSON数据并显示数据。

很想知道如何实现它，以便在JSON数据定期更改时更新数据！

我知道我需要刷新http get请求，但之后我不确定。

如果有人能指出我正确的方向，我会非常感激！

谢谢！

服务/ forecast.js

app.factory('forecast', ['$http', function($http) { 
return $http.get('http://json-time.appspot.com/time.json') 
        .success(function(data) { 
          return data; 
        }) 
        .error(function(err) { 
          return err; 
        }); 
}]);

控制器/ MinorController.js

app.controller('MinorController', ['$scope', 'forecast', function($scope, forecast) { 

 var setTimeOut = setInterval(function () {
          forecast.success(function(data) { 
          $scope.fiveDay = data; 
        });
       }, 5000);

       $scope.$on('$routeChangeStart', function (scope, next, current) {
           if (next.$$route.controller != "MinorController") {
               clearInterval(setTimeOut); // clear interval here
           }
       });    
}]);

test.html（查看）

 <!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Angular -->
<script src="js/shared/angular.min.js"></script>


<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">

<!-- Bootstrap JS -->
<script src="js/shared/bootstrap.min.js"></script>

</head>

<body ng-app="myApp">

        <div class="container" ng-controller="MinorController">
            <div class="row">
                <h1>Time JSON Example</h1>
            <h2>{{ fiveDay.tz }} </h2>
            <h2> {{ fiveDay.hour }} </h2>
            <h2> {{ fiveDay.datetime }} </h2>
            <h2> {{fiveDay.second }} </h2>
            </div>



        </div>

<!-- Modules -->
<script src="js/app.js"></script>

<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
<script src="js/controllers/MinorController.js"></script>

<!-- Services -->
<script src="js/services/forecast.js"></script>

</body>
</html>

Answer 1

您可以使用setInterval这样做。

app.controller('MinorController', ['$scope', 'forecast', function($scope, forecast) {
    var setTimeOut = setInterval(function () {
        forecast.success(function(data) {
            $scope.fiveDay = data;
        });
    }, 5000);

    $scope.$on('$routeChangeStart', function (scope, next, current) {
        if (next.$$route.controller != "MinorController") {
            clearInterval(setTimeOut); // clear interval here
        }
    });
}]);

现在，您的服务将每5秒调用一次并重新绑定您的对象。
如果您转到另一个屏幕，则routeChangeStart事件将调用该间隔时间。

Answer 2

您可以通过以下几种方式实现：

您可以每隔几秒钟在循环中发出http请求

setInterval(function(){ alert("Hello"); }, 3000);
如果您开发服务器数据源，则可以使用SignalR或Socket

使用Angular刷新JSON数据

2 个答案: