角度视图未在套接字上更新

Question

我正在使用平均堆栈中的套接字开发一个聊天应用程序模块。但是我的角度视图没有正确更新。我的控制台日志越来越好，甚至视图也得到了一些东西，但它没有像应有的那样正确更新

html:

<div class="conversation-wrap col-lg-3">
    <dummyTag ng-repeat="thread in message">
        <div class="media conversation" ng-if="thread.sender._id !== currentUserId">
            <a class="pull-left">
                <img class="media-object" ng-src="{{thread.sender.profileImageURL}}" data-ng-class="{'active' : $index=== selected}" style="width: 50px; height: 50px;">
            </a>
            <a href="#" ng-click="selectedThread(thread)">
                <div class="media-body">
                    <h5 class="media-heading">{{thread.sender.displayName}}</h5>
                    <small ng-repeat="messageDetails in thread.messages">{{messageDetails.messageBody | limitTo:1}}</small>
                </div>
            </a>
        </div>
        <div class="media conversation" ng-if="thread.sender._id == currentUserId">
            <a class="pull-left">
                <img class="media-object" ng-src="{{thread.receiver.profileImageURL}}" style="width: 50px; height: 50px;">
            </a>
            <a href="#" ng-click="selectedThread($index)">
                <div class="media-body">
                    <h5 class="media-heading">{{thread.receiver.displayName}}</h5>
                    <!--                                 <small ng-repeat="messageDetails in thread.messages">{{messageDetails.messageBody | limitTo:1}}</small>
 --></div>
            </a>
        </div>
    </dummyTag>
</div>
<div class="message-wrap col-lg-8">
    <div class="msg-wrap">
        <div class="alert alert-info msg-date">
            <strong>Today</strong>
        </div>
        <div class="media msg" ng-repeat="message in message.messages">
            <a class="pull-left" href="#">
                <img class="media-object" ng-src="{{message.author.profileImageURL}}" style="width: 32px; height: 32px;">
            </a>
            <div class="media-body">
                <small class="pull-right time"><i class="fa fa-clock-o"></i> 12:10am</small>
                <h5 class="media-heading">{{message.author.displayName}}</h5>
                <small class="col-lg-10">{{message.messageBody}}</small>
            </div>
        </div>
    </div>

控制器：

'use strict';

// Create the 'chat' controller
angular.module('chat').controller('MessageInboxController', ['$scope', '$location', 'Authentication', 'Socket', '$http', '$modal',
    function($scope, $location, Authentication, Socket, $http, $modal) {

        $scope.message = [];
        $scope.text = {};

        $scope.LoadInitialData = function() {
            //Method Call to Get Users on Team
            $http.get('/api/teamsByUser').success(function(response) {
                $scope.AllTeams = response;
            });

            //Get All Threads on User
            $http.get('/api/users/me').then(function(response) {
                $scope.currentUserId = response.data._id;
                $http.get('/api/GetAllThreads').then(function(response) {
                    $scope.message = response.data;
                    console.log($scope.message);
                });
            }); //users/me then ending here
        };



        //On Socket message on update converstation
        Socket.on('UpdateConversation', function(message) {
            console.log(message);
            console.log($scope.message);
            for (var i = 0; i < $scope.message.length; i++) {

                if ($scope.message[i]._id === message._id) {
                    $scope.message[i].messages.push(message.messages);
                }
            }
        });


        $scope.selectedThread = function(index) {
            $scope.threadData = index;
            $scope.message.messages = $scope.message[index].messages;
            console.log($scope.message.messages);
            // return index;

        };

        //Method to update thread. That is send a new message
        $scope.UpdateThread = function() {
            console.log("Getting Here");

            if ($scope.currentUserId === $scope.message[$scope.threadData].sender._id) {
                Socket.emit('UpdateThread', {
                    sendTo: $scope.message[$scope.threadData].receiver,
                    messageBody: $scope.text.messageBody
                });
            } else {
                Socket.emit('UpdateThread', {
                    sendTo: $scope.message[$scope.threadData].sender,
                    messageBody: $scope.text.messageBody
                });
            }
            $scope.text = '';

        };


        //Modal Method to Create a New Message
        $scope.NewMessage = function() {

            var modalInstance;

            modalInstance = $modal.open({
                templateUrl: 'modules/chat/client/views/partials/NewMessage.client.view.html',
                backdrop: true,
                controller: 'NewMessageController',
                size: 'md',
                resolve: {
                    team: function() {
                        return $scope.AllTeams;
                    }
                }
            });
            modalInstance.result.then(function(result) {
                // $scope.message = result;
                // if($scope.message.receiverId === $scope.currentuserId){
                //  $scope.message.receiverId = result.sender;
                // }
            }, function() {

            });
        };
}
]);

这就是触发 socket on 时我的视图如何更新**（空白图像并且没有消息。但是，如果我重新加载页面，我会正确收到消息，因为在 ng-init 中我从数据库中获取所有消息）**。起初我认为这可能是由于角度消化周期的原因。我也试过 $scope.$apply 。结果还是一样。我很确定这与我的 ng 重复有关。任何形式的帮助将不胜感激！

  [1]: http://i.stack.imgur.com/sUJH3.png

Answer 1

使用以下代码更新您的 Socket.on 方法

 //On Socket message on update conversation
        Socket.on('UpdateConversation', function(message) {
            console.log(message);
            console.log($scope.message);
        $scope.$apply(function () {
            for (var i = 0; i < $scope.message.length; i++) {

                if ($scope.message[i]._id === message._id) {
                    $scope.message[i].messages.push(message.messages);
                }
            }
        });

        });

Answer 2

解决方案 问题不在于数组推送或其他问题。基本上我没有填充用户个人资料（图像和其他详细信息）。用调试器跟踪它。日志没有给出任何线索。干杯！

Answer 3

看起来您只是缺少套接字函数中的分配。根据其余代码，我假设您要将传入消息分配给 $scope.message。