角聊天客户端 - 2周与一个控制器的看法

角聊天客户端 - 2周与一个控制器的看法

问题描述:

我在web应用程序建立聊天功能,我要创建聊天功能登录客户端之间。下面是从应用我的屏幕显示正是我想要解决角聊天客户端 - 2周与一个控制器的看法

Screen of my app

正如你看到的,我得到存储在侧边栏范围的在线用户列表。它在我的Asp.Net中用.cshtml创建为局部视图,并使用角度路由在“白盒”中呈现内容。

问题是我使用相同的控制器两次,它为每个html创建新的范围,所以我在我的侧边栏中获得数据,但在我的内容视图中我没有任何数据。我正在考虑将数据传递给rootcope,但我不知道它是否是个好主意。

所以我的问题是。有什么我可以克隆我的数据从一个控制器到另一个,或者我如何解决这个问题,而不改变功能,如果我可以保持我的观点控制一个控制器。

这里是我的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(); 
     }; 
    }};})(); 

考虑使用服务作为数据共享层。它还应该包含聊天相关的逻辑,在我看来,控制器应该尽可能的薄。

移动chatHub.client.getOnlineUsers功能的服务和users创造吸气。

Further read

+0

好的,要检查一下,谢谢你的提示 – Martin