Question

目标：来自外部来源的动态生成列表。

我已经设置了一个简单的角度应用程序，它可以从外部JSON源获取事件列表。我希望列表在从外部源添加事件时更新。它目前正在运作，但我有一个问题和三个问题：

1）我目前每15秒重写一次列表。如何在不重写列表的情况下添加到列表末尾？（问题和疑问）

2）是否有另一种更好的方法来跟上外部列表？我正在尝试遵循“RESTful”技术，这是否意味着我应该依赖客户端代码以我正在做的方式每隔多秒轮询一次？（最佳实践问题）

3）在控制器中设置超时最佳实践吗？因为它控制着页面上的动作？（最佳实践/理解问题）

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

eventModule.controller('eventControlller', 
  function($scope, $timeout, eventList) {
    $scope.events = eventList.getAllEvents().success(
      function(events) {$scope.events = events});
    var poll = function() {
      $timeout(function() {
        $scope.events = eventList.getAllEvents().success(
        function(events) {$scope.events = events});
        poll();
      }, 15000);
    };     
  poll();
});

eventModule.factory('eventList', function($http) {
  var url = "http://localhost/d8/events/request";
    return {
      getAllEvents: function() {
    return $http.get(url);
    }
  };
});

Answer 1

如果列表是一个数组，并且您想要向其添加新成员，则有几种不同的方法。一种方法是使用prototype.concat（）函数，如下所示：
```
function(events) {
    $scope.events = $scope.events.concat(events)
});
```
如果您不能使用它，那么您可以选择循环解决方案：
```
function concatenateEvents(events) {
    events.forEach(function(element) {
        events.push(element);
    }
}
```
关于更新列表的最佳方法，这取决于您的要求。如果15秒对你来说不是太长，那么你可以保持这个逻辑，但是如果你需要加快响应时间，甚至实时，那么你需要模拟服务器推送架构，这不同于默认Web架构，即请求 - 响应架构。基本上你可能想要探索网络套接字，和/或长轮询，或反向ajax，或彗星......有很多名字。 Web套接字是推荐的解决方案，其他只是在您必须使用某些不兼容的浏览器的情况下。
关于第三个问题，老实说我不知道。实际上从控制器中控制UI并不好，但由于我真的不知道你的应用程序应该做什么，我不知道这是否真的是一种不好的方法。< / p>

希望这有帮助！

编辑 - 忘记添加另一个要点：您不需要将eventList.getAllEvents（）分配给$ scope.events，就像在回调处理函数中那样做。 / p>

也许您可以将控制器修改为：

eventModule.controller('eventControlller', function($scope, $timeout, eventList) {
eventList.getAllEvents().success(
  function(events) {
      $scope.events = events
  });
var poll = function() {
  $timeout(function() {
    eventList.getAllEvents().success(
    function(events) {$scope.events = events});
    poll();
  }, 15000);
};     
poll();
});

以角度动态添加到列表

1 个答案: