Question

我在我的网络应用程序中构建聊天功能，我即将在已记录的客户端之间创建聊天功能。这是我的应用程序屏幕，显示我想要解决的问题

正如您所看到的，我在侧栏中获得了存储在范围内的在线用户列表。它在我的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();
        };
    }};})();

Answer 1

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

将users功能移至服务并为public List<X> list { get { return new List<X>(_list); } }创建getter。

Further read

Angular聊天客户端 - 一个控制器的2个视图

1 个答案: