AngularJS 与 SignalR $scope 变量问题

Question

我是 AngularJS 和 SignalR 的新手，但我遇到了一个问题，我无法解决或找到其他可能对我有帮助的类似帖子。抱歉，这变得相当冗长，但我想提供尽可能多的信息。

我正在尝试创建一个相当简单的 SPA，其中页面将包含三个基本区域。一个大厅（如登录区域），然后是管理部分和用户部分。因此，根据他们的登录方式，他们将显示在“管理员”部分或“用户”部分。 （这一切对我来说都很好）

在管理员部分和用户部分之间，我有一个聊天区域，因此可以在管理员和任何连接的用户之间来回发送消息。但是在特定页面上，我得到了输入消息的显示，但是它不会“显示”来自其他用户（或管理员）的任何消息。我可以在控制台中看到消息被另一个页面接收到，它被添加到消息数组中，但它就像有两个消息数组一样，所以它没有将消息组合到同一个数组中来显示。我将在下面的代码段之后展示它。

这两个聊天区域都显示相同的消息数组：

用户聊天区：

<div class="panel-body">
    <div class="scrollable" style="min-height: 150px; max-height: 170px; overflow-y: auto;">
        <div ng-repeat="msg in messages">
            {{msg.message}}
        </div>
    </div>
    <input ng-model="newMemberMessage" class="form-control input-sm pull-left" style="width: 80%" type="text" />
    <button ng-click="sendMemberMessage()" class="pull-right btn btn-primary btn-sm">Send</button>
</div>

管理员聊天区：

<div class="panel-body">
    <div class="scrollable" style="min-height: 150px; max-height: 170px; overflow-y: auto;">
        <div ng-repeat="msg in messages">
            {{msg.message}}
        </div>
    </div>
    <input ng-model="newAdminMessage" class="form-control input-sm pull-left" style="width: 80%" type="text" />
    <button ng-click="sendAdminMessage()" class="pull-right btn btn-primary btn-sm">Send</button>
</div>

我创建了以下 ChatHub 方法：

    public void SendMessage(SendData data)
    {
        Clients.Group(data.roomNumber, Context.ConnectionId).newBroadcastMessage(data.name + ": " + data.message);
    }

在我的控制器中，我有一个变量定义为：

$scope.messages = [];

然后我声明了以下指令：

$scope.sendMemberMessage = function () {
    chat.server.sendMessage({ name: $scope.name, message: $scope.newMemberMessage, roomNumber: $scope.roomNumber });
    displayMessage("You: " + $scope.newMemberMessage);
    $scope.newMemberMessage = "";
};

$scope.sendAdminMessage = function () {
    chat.server.sendMessage({ name: $scope.name, message: $scope.newAdminMessage, roomNumber: $scope.adminRoomNumber });
    displayMessage("You: " + $scope.newAdminMessage);
    $scope.newAdminMessage = "";
};

chat.client.newBroadcastMessage = onNewBroadcastMessage;

function onNewBroadcastMessage(message) {
    displayMessage(message);
    $scope.$apply();        //Required to update the scope digest bindings.
    console.log(message);
};

function displayMessage(message) {
    $scope.messages.unshift({ message: message });
    console.log("Added new member message to messages.  Current Messages: ");
    for (var i = 0; i < $scope.messages.length ; i++) {
        console.log($scope.messages[i]);
    }
};

当我运行我的应用程序时，我会在 Chrome 窗口和 Firefox 窗口中打开表单，以确保它们彼此独立运行。

这是我在 Chrome 窗口中运行的管理屏幕中输入几条消息时在控制台中显示的内容：

[08:44:28 GMT-0500 (Central Daylight Time)] SignalR: Invoking chat.SendMessage jquery.signalR-2.1.2.js:81
Added new member message to messages.  Current Messages:                       mainCtrl.js:293
Object {message: "You: Admin Test 1"}                                          mainCtrl.js:295
[08:44:28 GMT-0500 (Central Daylight Time)] SignalR: Invoked chat.SendMessage  jquery.signalR-2.1.2.js:81
[08:45:06 GMT-0500 (Central Daylight Time)] SignalR: Invoking chat.SendMessage jquery.signalR-2.1.2.js:81
Added new member message to messages.  Current Messages:                       mainCtrl.js:293
Object {message: "You: Admin Test 2"}                                          mainCtrl.js:295
Object {message: "You: Admin Test 1", $$hashKey: "004"}                        mainCtrl.js:295
[08:45:06 GMT-0500 (Central Daylight Time)] SignalR: Invoked chat.SendMessage  jquery.signalR-2.1.2.js:81

以上消息正确显示在管理员聊天面板中。
以下内容显示在 Firefox 的控制台中，但这些都没有显示在用户聊天面板中：

"[08:44:28 GMT-0500 (Central Standard Time)] SignalR: Triggering client hub event 'newBroadcastMessage' on hub 'chat'." jquery.signalR-2.1.2.js:81
"Added new member message to messages.  Current Messages: "      mainCtrl.js:293
Object { message: "Admin: Admin Test 1" }                        mainCtrl.js:295
"Admin: Admin Test 1"                                            mainCtrl.js:278
"[08:45:06 GMT-0500 (Central Standard Time)] SignalR: Triggering client hub event 'newBroadcastMessage' on hub 'chat'." jquery.signalR-2.1.2.js:81
"Added new member message to messages.  Current Messages: "      mainCtrl.js:293
Object { message: "Admin: Admin Test 2" }                        mainCtrl.js:295
Object { message: "Admin: Admin Test 1" }                        mainCtrl.js:295
"Admin: Admin Test 2"                                            mainCtrl.js:278

现在，如果我在 Firefox 的用户屏幕上输入聊天消息，Firefox 控制台会显示：

"[09:04:38 GMT-0500 (Central Standard Time)] SignalR: Invoking chat.SendMessage" jquery.signalR-2.1.2.js:81
"Added new member message to messages.  Current Messages: " mainCtrl.js:293
Object { message: "You: User Test 1", $$hashKey: "004" } mainCtrl.js:295
"[09:04:38 GMT-0500 (Central Standard Time)] SignalR: Invoked chat.SendMessage" jquery.signalR-2.1.2.js:81

输入的文本在 Firefox 用户聊天显示中显示良好。
以下内容会显示在 Chrome 控制台上，但不会显示在 Chrome 聊天面板中。 （聊天面板仍然显示之前的管理员聊天消息。）

[09:04:38 GMT-0500 (Central Daylight Time)] SignalR: Triggering client hub event 'newBroadcastMessage' on hub 'chat'. jquery.signalR-2.1.2.js:81
Added new member message to messages.  Current Messages:  mainCtrl.js:293
Object {message: "Mike: User Test 1"} mainCtrl.js:295
Mike: User Test 1 mainCtrl.js:278

messages 数组的列表，“应该”有以前的聊天消息仍然在数组中。

所以我无法弄清楚我做错了什么，或者为什么聊天显示没有显示其他人的聊天消息。我有一个原始示例聊天应用程序，我在其中放置了两个聊天窗口，在两个聊天面板中使用相同的变量和模型名称，它工作正常。所以我知道这个逻辑应该可以工作，但我不知道我在这个主应用程序中做错了什么，阻止聊天消息显示在其他窗口中。

谁能帮我解决这个问题？

Answer 1

经过大量的反复试验后，我尝试使用我的应用程序所基于的原始示例聊天程序。随着那个程序的工作，我将我的新程序一块一块地应用到它上面。在我终于开始将 Admin 部分的部分拼凑进去之后，我终于找到了我的问题。我的管理部分中有一个标签，其中有一行旧代码，用于在其上设置 ng-controller，这与页面顶部主要的 ng-controller 相同。一旦我删除了第二个 ng-controller 设置，聊天又开始正常工作。我假设第二个 ng-controller 设置正在创建第二个 $scope，这就是为什么我看到我的消息数组被复制的原因，即使我的消息数组的显示不在第二个 ng-controller 标记内。至少现在我终于可以继续我的项目了。