角度のあるチャットクライアント - 1つのコントローラで2つのビュー

Question

私は自分のWebアプリケーションでチャット機能を構築していますが、ログに記録されたクライアント間でチャット機能を作成しようとしています。ここで私はあなたが私はサイドバーにスコープに保存されているオンラインユーザのリストを持って見ることができるように

Screen of my app

を解決したい正確に何を表示するアプリケーションからの私の画面があります。 .cshtmlと私のAsp.Netの部分ビューとして作成され、私は角度ルーティングを使用して "ホワイトボックス"のコンテンツをレンダリングします。

問題は同じコントローラーを2回使用し、各HTMLの新しいスコープを作成するので、サイドバーにデータがあるが、コンテンツビューではデータがありません。私はrootscopeに自分のデータを渡すことを考えていますが、私はその良い考えがあるかどうかは分かりません。

私の質問はそうです。あるコントローラから別のコントローラにデータをクローンする方法や、機能を変更せずにこの問題を解決する方法がありますか。

は、ここでデータ共有のための層などのサービスを使用することを検討して私のPrivateChatController.js

(function() { 
'use strict'; 
app.controller('PrivateChatController', ['$rootScope', '$scope', 'SignalRService', '$location', 'PrivateChatService', PrivateChatController]); 
function PrivateChatController($rootScope, $scope, SignalRService, $location, PrivateChatService) { 


    //angular stuff 
    $scope.online_users = []; 

    $scope.isChatHidden = false; 

    $scope.openPrivateChatWindow = function (index) { 
     // $scope.isChatHidden = true; 
     angular.forEach($scope.online_users, function (value, key) { 
      if (index == key) { 
       $rootScope.currentPrivateChatUser = ({ 
        UserName: value.UserName, 
        ConnectionId: value.connectionId, 
       }); 

       $location.path("/details/" + value.UserName); 
      } 
     }); 
    }; 

    $scope.closePrivateChatWindow = function (index) { 
     $scope.isChatHidden = false 
    }; 


    //signalR stuff 
    var chatHub = $.connection.chatHub; 
    $.connection.hub.logging = true; 
    chatHub.client.foo = function() { }; 
    registerClientMethods(chatHub); 
    $.connection.hub.start() 
     .done(function(){ console.log('Now connected, connection ID=' + $.connection.hub.id); }) 
     .fail(function() { console.log('Could not Connect!'); }); 

    function registerClientMethods(chatHub) { 
     //user object 

     chatHub.client.newOnlineUser = function (user) { 
      var newUser = ({ 
       connectionId: user.ConnectionId, 
       UserName: user.UserName 
      }); 

      $scope.online_users.push(newUser); 
      $scope.$apply(); 
     }; 

     //compare scope online users with server list of online users 
     chatHub.client.getOnlineUsers = function (onlineUsers) { 
      //loop through scope 
      angular.forEach($scope.online_users, function (scopeValue, scopeKey) { 
       //loop through received list of online users from server 
       angular.forEach(onlineUsers, function (serverListValue, serverListKey) { 
        if (!(serverListValue.ConnectionId == scopeValue.connectionId)) { 
         var newUser = ({ 
          connectionId: serverListValue.ConnectionId, 
          UserName: serverListValue.UserName 
         }); 
         $scope.online_users.push(newUser); 
         $scope.$apply(); 
        } 
       }) 
      }) 
     }; 

     chatHub.client.onUserDisconnected = function (id, user) { 
      var index = 0; 
      //find out index of user 
      angular.forEach($scope.online_users, function (value, key) { 
       if (value.connectionId == id) { 
        index = key; 
       } 
      }) 

      $scope.online_users.splice(index, 1); 
      $scope.$apply(); 
     }; 
    }};})(); 

Answer 1

です。それはまた、私の意見でコントローラはできるだけ薄くなければならない、チャット関連のロジックが含まれている必要があります。

chatHub.client.getOnlineUsers機能をサービスに移動し、usersのゲッターを作成します。

Further read