在AngularJS中動態獲取來自websockets的動態獲取的外部JSON數據的DOM自動更新DOM

我有一個基於websocket的應用程序，它以JSON對象的形式將數據「推送」到客戶端。在AngularJS中動態獲取來自websockets的動態獲取的外部JSON數據的DOM自動更新DOM

我需要DOM自動更新，通過AngularJS通過websocket協議檢索JSON。我找不到一個簡單的方法來做到這一點，並改變websocket檢索代碼是不是去的方式。

This post，儘管對於Socket.io用戶（這我不使用），涉及使用一個相當大的一塊的JavaScript，似乎太麻煩使用的，而this post表明可變附接到$window對象 - 這是不關於事情的最佳方式。

假設兩件事情：

我有一塊JSON的，我需要自動更新DOM，這是外部到AngularJS
我試圖避免大量代碼的要求，以實現

我該如何達到我的要求？

我和我的jsfiddle玩弄用於更新DOM（表）時，JSON更新，但是JSON是角碼之內。我的JSON將在它之外。

來源

2013-10-24 Jimbo

Socket.io上的帖子應該給你足夠的提示。您需要將與websocket的交互包裝到一個angularjs服務中，並在需要的地方使用該服務。 – Chandermani

@Chandermani正如我所說的那樣，只是爲了自動更新外部變量的東西而非常複雜。我發現了另一個使用'$ apply'的解決方案 - 你有沒有遇到過這個？ – Jimbo

它是做同樣的事情$ rootScope。$ apply。你爲什麼認爲這很複雜。它試圖創建的是使用'on'和'emit'方法提供pub \ sub api。你可能會做同樣的事情:) – Chandermani

好吧，所以要找出如預期的方式並不容易，但這裏有一個解決方案的一般要點，我發現 - 任何其他解決方案都非常感謝。

您需要：

定義使用ng-init JSON值的默認設置。這些將在任何數據傳遞到Angular範圍之前出現。這實際上可以是一個空的JSON對象，所以幾乎沒有額外的編碼。
在您單獨的非角度代碼中，您需要檢索您附加ng-init指令的對象的作用域，然後使用$apply方法更新作用域中的JSON。

這是我在說的。假設我有一個標籤列表，我想從外部來源添加一個新標籤。

<ul id="tags" ng-init="tags = [{name: 'somejson'}]"> 
    <li ng-repeat="tag in tags"> 
     {{tag.name}} 
    </li> 
</ul>

注意我們已經給ul元素的id字段，以便我們可以在外部對角的JavaScript引用此以後。代碼很簡單。它將循環顯示標籤並在li中顯示「somejson」。

現在我們的外部函數來更新這個JSON。

setTimeout(function() { 
    var scope = angular.element($("#tags")).scope(); 

    scope.$apply(function() { 
     scope.tags.push({name: 'ANOTHER LI HERE PLEASE'}); 
    }); 
}, 5000);

我裹的代碼在調用setTimeout()所以它會採取5秒更新，你實際上就可以看到DOM變化。首先，獲得#tags元素的範圍，然後使用$apply將自定義函數應用於範圍內的任何變量。

在這種情況下，我添加了一個自定義LI。但是，使用我自己的代碼，當從服務器檢索數據時，我會將從WebSocket檢索到的JSON推入此方法中，而不是在setTimeout中。

這是JSFiddle。

來源

2013-10-24 16:04:16 Jimbo

在AngularJS中動態獲取來自websockets的動態獲取的外部JSON數據的DOM自動更新DOM

回答

相關問題