gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 19:59:45 25 4
gpt4 key购买 nike

我有一个动态更新并使用 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 部分变为空白。

最佳答案

根据你的评论判断

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);
}
}
});
}

关于javascript - AngularJS ng-repeat map (对象)不实时更新 DOM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53514845/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com