1

ダッシュボードのリアルタイム 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 フレームワークでこれを行うことにオープンです...

4

1 に答える 1

2

私も 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;
});

(多数の) コントローラーの 1 つ:

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 経由でブロードキャストする 1 つのサービスがあり、それらのメッセージをリッスンするコントローラーを簡単に作成できます。コントローラーでメッセージを受信したら、$scope を変更すると、ビューが自動的に更新されます。

于 2013-03-26T00:06:37.250 に答える