AngularJS ng-repeat 在地图（对象）上不实时更新 DOM

Question

我有一个动态更新并使用 ng-repeat 填充 DOM 的对象。但是 DOM 不会实时更新，一旦将新值推送到对象中，即使 console.log 显示该值已添加。

//appView.html
<div class="row">
        <uib-tabset type="pills" vertical="true">
            <uib-tab ng-repeat="(key, value) in channelMap">
                <uib-tab-heading>
                     <span>{{value.displayName}}</span>
                </uib-tab-heading>
                <div class="messageWrapper">
                    <div class="thread" ng-repeat="threads in value.messageThreads track by $index">
                        <span>{{threads.text}}</span>
                    </div>
                    <div class="message-area">
                        <input type="text" ng-model="messageText">
                        <button ng-click="sendMessage(key,value,messageText)">Send</button>
                    </div>
                </div>
            </uib-tab>
        </uib-tabset>   
    </div>

//Controller.js

$scope.channelMap = {};
subscriptionCallback = function(data)
        {
            var messageFromServer = JSON.parse(data.body);
            if (messageFromServer.isSuccess) {
                var messageObj = messageFromServer.data;
                console.log(messageObj);
                if (messageObj.messageType === "CREATE_CHANNEL") {
                    // Subscribing to private channel
                    subscribeToChannel(messageObj.text, subscriptionCallback);
                    //Put it in channelsMap with reciever id as key
                    var threadObj = {};
                    var displayName = "";
                    if($scope.user.id == messageObj.recieverId){
                        displayName = messageObj.senderName + " (" + messageObj.usernameSender + " )";
                    }
                    else{
                        displayName = messageObj.recieverName + " (" + messageObj.usernameReciever + " )";
                    }
                    threadObj.displayName = displayName;
                    threadObj.channenId = messageObj.text;
                    threadObj.messageThreads = [];
                    $scope.channelMap[messageObj.recieverId] = threadObj;
                    console.log($scope.channelMap);
                }
                else{
                    var msg = {};
                    msg.text = messageObj.text;
                    msg.senderId = messageObj.senderId;
                    msg.recieverId = messageObj.recieverId;
                    $scope.channelMap[messageObj.recieverId].messageThreads.push(msg);
                    console.log($scope.channelMap[messageObj.recieverId].messageThreads);
                }
            }
        }

函数subscriptionCallback 在从服务器接收到响应后被调用，并负责在$scope.channelMap 中填充数据，如果我检查console.log，它会成功执行此操作，但是如果我执行对 DOM 的任何操作，DOM 都会更新。 我也尝试将 controller 用作 . (dot) 语法，但是即使在我对 DOM 执行任何操作之后，它也会使 ng-repeat 部分变为空白。

Answer 1

根据你的评论来判断

一旦服务器向其发送消息，就会调用订阅回调 客户端，这个 sn-p 是基于 web 套接字的程序的一部分

由于从 Angular 控制之外调用 subscriptionCallback，因此对控制器范围的任何更改都不会同步到视图，因为 Angular 不知道何时进行了更改。

要解决这个问题，请将您的范围更改包含在 $scope.$apply(fn) 中；

$scope.channelMap = {};
subscriptionCallback = function(data)
{
    $scope.$apply(function() {
        var messageFromServer = JSON.parse(data.body);
        if (messageFromServer.isSuccess) {
            var messageObj = messageFromServer.data;
            console.log(messageObj);
            if (messageObj.messageType === "CREATE_CHANNEL") {
                // Subscribing to private channel
                subscribeToChannel(messageObj.text, subscriptionCallback);
                //Put it in channelsMap with reciever id as key
                var threadObj = {};
                var displayName = "";
                if($scope.user.id == messageObj.recieverId){
                    displayName = messageObj.senderName + " (" + messageObj.usernameSender + " )";
                }
                else{
                    displayName = messageObj.recieverName + " (" + messageObj.usernameReciever + " )";
                }
                threadObj.displayName = displayName;
                threadObj.channenId = messageObj.text;
                threadObj.messageThreads = [];
                $scope.channelMap[messageObj.recieverId] = threadObj;
                console.log($scope.channelMap);
            }
            else{
                var msg = {};
                msg.text = messageObj.text;
                msg.senderId = messageObj.senderId;
                msg.recieverId = messageObj.recieverId;
                $scope.channelMap[messageObj.recieverId].messageThreads.push(msg);
                console.log($scope.channelMap[messageObj.recieverId].messageThreads);
            }
        }
    });
}