如何將實時模型附加到angular.js中的控制器？

Question

我正在嘗試顯示幾個視圖/控制器，其中包含來自儀表板實時json（帶有pubnub）的數據。

在angular.js常規文檔中，我看到類似以下內容：

function CounterCtrl($scope) {
    $scope.data = {'counter':1};
};

但是我想要的是有一個數據源列表，然后將數據的更改通知視圖並呈現它們。

因此，我可以擁有：

counter1:{'counter':1} => Rendered by view1 and view2
counter2:{'counter':5} => Rendered by view3

view4還沒有數據。 幾分鍾后到達

counter3:{'counter':8} => Rendered by view4

然后更新counter1

counter1:{'counter':2} 

我通過每種視圖類型創建一個控制器，某些2個視圖可以在同一控制器中但顯示不同的數據：

view1 & view3 are UpDownCtrl
view2 is LineGraphCtrl

在儀表板中，我需要更新視圖，並根據數據（或缺少數據以顯示空狀態）更改行為。

PD：如果適合此類任務，我願意在另一個js框架中執行此操作...

Answer 1

我也使用PubNub，並且已經在AngularJS應用程序中啟動了非常基本的PubNub服務。

服務（正在進行中）：

app.factory('pubnub', function($rootScope) {
    var pubnub = {
        lastMessage: '',
        messages: [],
        callback: function(message) {
            pubnub.lastMessage = message;
            pubnub.messages.unshift(message);
            $rootScope.$broadcast('pubnubMessageReceived', message); 
        },
        getLastMessage: function() {
            return pubnub.lastMessage;
        },
        getMessages: function() {
            return pubnub.messages;
        }
    }

    PUBNUB.subscribe({
        channel    : 'my_channel',
        restore    : false, 
        callback   : pubnub.callback,
    });

    return pubnub;
});

（許多）控制器之一：

var ProjectController = function($scope, pubnub) {

    $scope.$on('pubnubMessageReceived', function(event, message) {
        console.log("pubnub message received in project controller",message);
        if(message.target == "project") {
            // The message is for me!! Do something with it
            $scope.data = message.data;
        }
    });
}

因此，我有一個服務偵聽PubNub消息並通過$ rootScope廣播它們，然后讓任何控制器偵聽這些消息很簡單。 在控制器中收到消息后，修改$ scope，它將自動更新視圖。