动态添加到 angular 中的列表

Question

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

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

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

2) 是否有另一种更好的方法来与外部列表保持同步？我正在尝试遵循 "RESTful" 技术，这是否意味着我应该依靠客户端代码每隔这么多秒就按照我的方式进行轮询？（最佳实践问题）

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

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架构，也就是请求-响应架构。基本上你可能想探索网络套接字，and/or 长轮询，或反向 ajax，或彗星......有很多名字。 Web 套接字是推荐的解决方案，其他仅在您必须使用某些不兼容的浏览器时才使用。
关于第三个问题，我真的不知道。从你的控制器中控制 UI 确实感觉不太好，但因为我真的不知道你的应用程序应该做什么，我不知道这是否真的是一个坏方法做吧。

希望对您有所帮助！

EDIT - 忘记添加另一个要点：您不需要像现在一样将 eventList.getAllEvents() 分配给 $scope.events在回调处理函数中执行此操作。

也许您可以将您的控制器修改成这样：

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();
});

动态添加到 angular 中的列表

Dynamically add to a list in angular

javascript

polling

angularjs