AngularJS ng-repeat на карте (объекте) не обновляет DOM в реальном времени - PullRequest
Новая
       20

AngularJS ng-repeat на карте (объекте) не обновляет DOM в реальном времени

0 голосов
/ 28 ноября 2018

У меня есть объект, который динамически обновляется и заполняет DOM с помощью ng-repeat.Однако 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 обновляется.Я также пытался использовать контроллер как.(точка) синтаксис , однако он оставил часть ng-repeat пустой даже после того, как я выполню какое-либо действие в DOM.

1 Ответ

0 голосов
/ 28 ноября 2018

Судя по вашему комментарию

Обратный вызов подписки вызывается после того, как сервер отправил сообщение клиенту, этот фрагмент является частью программы на основе веб-сокетов

Как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);
            }
        }
    });
}
...