AngularJS如何在后端更改时自动重新加载？

Question

AngularJS如何在后端更改时自动重新加载？

10

我希望我的应用程序在后端更改时能够自动刷新。我添加了一个按钮来重新加载从后端获取的数据，但我不想这样做。这是我的代码。

<body data-ng-app="myPr">
  <div ng-controller="TodosController">
    <div ng-repeat="todo in todos">
      <p>{{todo.title}} ...... {{todo.is_completed}}</p>
    </div>
    <button ng-click="reload()">Reload</button>
  </div>
</body>

我的 app.js

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

myPr.controller("TodosController", function ($scope,$http){

  $scope.reload = function () {
    $http.get('http://localhost:3000/api/todos').
        success(function (data) {
          $scope.todos = data.todos;
      });
  };
  $scope.reload();
});

感谢

- user3486836

2个回答

12

你可以按照这里文档所述，使用$interval(待重复函数, 以毫秒为单位的时间间隔)。

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

myPr.controller("TodosController", function ($scope,$http){

    $scope.reload = function () {
        $http.get('http://localhost:3000/api/todos').
            success(function (data) {
                $scope.todos = data.todos;
            });
    };
    $scope.reload();
    $interval($scope.reload, 5000);
});

注意：使用此服务创建的时间间隔必须在完成后明确销毁。特别是当控制器的范围或指令的元素被销毁时，它们不会自动销毁。您应该考虑这一点，并确保在适当的时刻始终取消时间间隔。

- Kelvin Lai

我使用了$interval，它非常好。确保包含合适的时间间隔以防止对后端造成过大负载。 - Pavan Jadda

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Boskovic · Accepted Answer

你可以定期重新加载数据。否则，你需要设置像socket.io或Pusher这样的东西，并在服务器更新时向浏览器推送通知。

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

myPr.controller("TodosController", function ($scope,$http,$timeout){

  $scope.reload = function () {
    $http.get('http://localhost:3000/api/todos').
        success(function (data) {
          $scope.todos = data.todos;
      });

    $timeout(function(){
      $scope.reload();
    },30000)
  };
  $scope.reload();
});