如何将实时模型附加到 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

在仪表板中，我需要更新视图，并根据数据更改行为（或缺少数据，显示为空状态）。

P.D：如果针对此类任务量身定制，我愿意在另一个 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，它会自动更新您的视图。