0

予選

私はangularjsを使用してWebアプリを開発しています。ある時点で、私のメインコントローラーはデータを継続的に送信するWebサービスに接続します。使用しているストリームをキャプチャして処理するには（http://ajaxpatterns.org/HTTP_Streaming）。すべてが魅力のように機能します。これらのストリーミングデータを、jqueryチャートライブラリを介して処理および表示する別のコントローラーと共有したいと思います（どちらを使用するかはまだ決定されていませんが、この質問の範囲外です）。これらのデータを共有するために、私はこのjsfiddle（http://jsfiddle.net/eshepelyuk/vhKfq/）をフォローしました。

以下に私のコードのいくつかの関連部分を見つけてください。

モジュール、ルート、およびサービス定義：

var platform = angular.module('platform', ['ui']);

platform.config(['$routeProvider',function($routeProvider){
    $routeProvider.
        when('/home',{templateUrl:'partials/home.html',controller:PlatformCtrl}).
        when('/visu/:idVisu', {templateUrl: 'partials/visuTimeSeries.html',controller:VisuCtrl}).
        otherwise({redirectTo:'/home',templateUrl:'partials/home.html'})
}]);

platform.factory('mySharedService', function($rootScope) {
    return {
        broadcast: function(msg) {
            $rootScope.$broadcast('handleBroadcast', msg); 
        }
    };
});

PlatformCtrlの定義：

function PlatformCtrl($scope,$http,$q,$routeParams, sharedService) {

  ...

  $scope.listDataVisu ={};

  ...

  $scope.listXhrReq[idVisu] = createXMLHttpRequest();
  $scope.listXhrReq[idVisu].open("get", urlConnect, true);
  $scope.listXhrReq[idVisu].onreadystatechange = function() {
     $scope.$apply(function () {
       var serverResponse = $scope.listXhrReq[idVisu].responseText;
       $scope.listDataVisu[idVisu] = serverResponse.split("\n");
       sharedService.broadcast($scope.listDataVisu);
    });
  };
  $scope.listXhrReq[idVisu].send(null);
  var w = window.open("#/visu/"+idVisu);

  $scope.$on('handleBroadcast', function(){
    console.log("handleBroadcast (platform)");
  });

}

VisuCtrlの定義：

function VisuCtrl($scope,$routeParams,sharedService) {

    $scope.idVisu = $routeParams.idVisu;
    $scope.data = [];

    /* ***************************************
     *   LISTENER FOR THE HANDLEBROADCAST EVENT
     *****************************************/ 

    $scope.$on('handleBroadcast', function(event,data){
        console.log("handleBroadcast (visu)");
        $scope.data = data[$scope.idVisu];
    });


}

注入：

PlatformCtrl.$inject = ['$scope','$http','$q','$routeParams','mySharedService'];
VisuCtrl.$inject = ['$scope','$routeParams','mySharedService'];

問題の定義

このコードを実行すると、コントローラーのみがイベントPlatformCtrlをリッスンしているように見えます。handleBroadcast実際、コンソールを見ると、表示されるのはhandleBroadcast (platform)新しいデータが到着するたびだけです。公式ドキュメントを読んだので、とても驚いてい$broadcastます。

イベント名をすべての子スコープ（およびその子）に下向きにディスパッチして、登録されたng。$ rootScope.Scope＃$onリスナーに通知します。

特定のアプリのすべてのスコープはから継承するため、新しいデータがブロードキャストされるたびに関数inが起動されない$rootScope理由がわかりません。$onVisuCtrl

4

3 に答える 3

2

新しいブラウザウィンドウを開くと、新しいAngularJSインスタンスが起動していると思います。このように、2つのコントローラーがサービスを介して通信できるようにすることはできません。

スコープの通信に問題がある場合は、$ rootScopeを挿入して、通信する必要のあるすべてのスコープが実際にインスタンス化されているかどうかを確認できます。

function VisuCtrl($scope, $routeParams, sharedService, $rootscope) {
    console.log($rootScope);
}
于 2013-02-17T11:59:50.443 に答える
0

リクエストフローはAngularから出てくるため、次の$ digestフェーズまで認識されません（Angularがダーティマッチングを介して双方向バインディングを処理する方法を参照してください）。角度のある世界に入るには、以下を使用する必要があります$apply。

  $scope.listXhrReq[idVisu].onreadystatechange = function() {
     $scope.$apply(function () {
       var serverResponse = $scope.listXhrReq[idVisu].responseText;
       $scope.listDataVisu[idVisu] = serverResponse.split("\n");
       sharedService.broadcast($scope.listDataVisu);
     });
  };
于 2013-02-15T11:40:11.470 に答える
0

カスタムルーティングを使用しているため、VisuCtrlがまだ初期化されていない可能性がありますか？あなたがにナビゲートするとき、それはまだ同じ/visu/:idVisuですか？

于 2013-02-15T11:57:13.297 に答える