AngularJS：使用ng-repeat處理來自套接字的數據的最佳方法

Question

我對使用Socket.IO的實時數據很陌生。我試圖找出在AngularJS ng-repeat中處理Socket.IO數據的最佳方法是什麼？

現在我有後端發送整個數據結構每次有更新它。

但這會導致ng-repeat刷新以顯示新數據（如果我僅對客戶端數據進行了任何修改，則在下次從後端發送數據時將其刪除）。有一個更好的方法嗎？

我應該過濾掉後端需要更新的唯一數據，然後將其發送到前端，而不是再次提交整個數據結構？ （但後來我將如何在ng-repeat應用此只更新數據...）

我試着用UnderscoreJS在前端擴展方法，但它似乎會導致數據的ng-repeat排序問題（排序依據和過濾器都打破）。

我的具體使用案例是處理體育比分（數組中的幾個比賽（對象）），我不斷獲取數據更新，無論他們是比賽時間變化還是得分比賽。更新幾乎每秒都在發生。我正在使用這個特定的API並獲取特定刷新變量的所有數據，然後通過套接字將其發送到前端。不是真正使用套接字的理想情況，但它是迄今爲止我發現的與API進行交互的唯一方式。

Answer 1

我認爲最好的做法是隻發送給客戶新的事件，而不是每次發送給整個列表。你可以將這些事件添加到一個數組，並讓它們呈現它們ng-repeat。下面是使用ngSocketIO，我爲角創建了一個簡單SocketIO模塊的示例（語法不會比你已經使用了一個很大的不同，我猜）：

app.controller('MyCtrl', function($scope, socket) { 
    $scope.events = []; 

    socket.on('someEvent', function(data) { 
     $scope.events.push(data); 
    } 
} 

而標記可能是是這樣的：

<ul> 
    <li ng-repeat="event in events">{{ event.name }}</li> 
</ul> 

現在你可以改變events陣列的任何對象，當一個事件到達時，它不會被刪除。如果同一個事件可以被重新發送（用新的數據，也許），那麼你可以用一個「哈希」更換陣列：

app.controller('MyCtrl', function($scope, socket) { 
    $scope.events = {}; 

    socket.on('someEvent', function(data) { 
     $scope.events[data.id] = data; 
    } 
} 

的ng-repeat表達需要按順序略有改變它遍歷哈希：

<li ng-repeat="(id, data) in events">{{id}}: {{data.name}}</li> 

在這種情況下，如果同一事件再次到達，則對事件的任何本地更改都將丟失。如果要部分更新if的本地副本，則需要手動完成此操作，也許可以通過保存不希望丟失的部分並在使用服務器中的新數據更新本地事件後恢復它們。

Answer 2

看看這個新功能在1.2：

http://www.bennadel.com/blog/2556-Using-Track-By-With-ngRepeat-In-AngularJS-1-2.htm