Часть div не обновляется, даже если запрос и ответ были выполнены правильно

115
15

У меня есть контроллер. У которого есть настраиваемый html show-chat, определенный с помощью директивы.

<div id='homeDiv' ng-controller="bloggingHomeController">
<div id ='chatAreaDiv' style="float:left;width:25%;">
<h3>Messages</h3>
<show-chat></show-chat>
</div>
</div>

Ниже приведено определение директивы show-chat

 appDirective.directive('showChat', function() {
return {
restrict: 'E', // E = Element, A = Attribute, C = Class, M = Comment
// template: '',
templateUrl: 'partials/chat.html',
replace: true
};
});

chat.html выглядит следующим образом.

<div id='chatHtmlDiv' ng-controller='chatController'>
<ul>
<li ng-repeat="aChat in allChats" style="list-style-type: none;">
<b style="color:red;">{{aChat.message}}</b><br/>
<cite>by {{aChat.createdBy}} on {{aChat.createdDate | date}}</cite>
</li>
</ul>
<textarea id='chatBox' ng-model='chatMessage'></textarea>
<br/>
<button id='postChatButton' ng-click = postChatMessage()>Post Message</button>
</div>

Внутри bloggingHomeController у меня есть следующее.

app.controller('chatController', function($scope, $route, chatService) {
chatService.getChat()
.then(function(data) {
$scope.allChats = data;
}, function(error) {

});
$scope.postChatMessage = function() {
var c = JSON.parse(JSON.stringify($scope.chatMessage));
chatService.save(c)
.then(function(data) {
$scope.chatMessage = '';
}, function(error) {

})

chatService.getChat()
.then(function(data) {
$scope.allChats = data;
$route.reload();
}, function(error) {

});
};
});

Когда postChatMessage() вызывается из chat.html, запрос поступает в базу данных для получения сообщений чата. Проблема заключается в $ scope.allChats обновляется с новым значением, но show-chat не показывает обновленные данные. Могу ли я узнать, не обновляется ли это? Заранее спасибо.

спросил(а) 2021-01-19T19:02:13+03:00 2 месяца, 3 недели назад
1
Решение
96

Это может произойти, потому что вы пытаетесь сохранить новое сообщение и получить список сообщений в одно и то же время.

Попытайтесь перенести прием новых сообщений внутри на успешный обратный вызов для запроса сохранения сообщения чата


chatService.save(c)
.then(function(data) {
$scope.chatMessage = '';
// Receive new messages here
}, function(error) {

})

ответил(а) 2021-01-19T19:02:13+03:00 2 месяца, 3 недели назад
45

Вызовите этот $scope.$apply() после установки ответа на модели.

ответил(а) 2021-01-19T19:02:13+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема