javascript - AngularJS ng-repeat map (对象)不实时更新 DOM

Question

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

//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 作为 . (点)语法，但即使在我对 DOM 执行任何操作后，它也会使 ng-repeat 部分变为空白。

Answer 1

根据你的评论判断

Subscription callback is called once the server sent a message to client, this snippet is a part of web socket based program

由于 subscriptionCallback 是从 Angular 控制之外调用的，因此对 Controller 范围的任何更改都不会同步到 View ，因为 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);
            }
        }
    });
}