ng推送新项目时重复不更新
ng-repeat not updating when pushing new item
在将一个新项目推送到列表后,我试图用ng repeat更新一个视图,但ng repeat仍然保留旧引用。这是我的代码(函数(){"严格使用";
angular.module('messages', [])
.component('messages', {
template: '<ng-outlet></ng-outlet>',
$routeConfig: [
{ path: '/', name: 'MessageList', component: 'messageList', useAsDefault: true },
{ path: '/:id', name: 'MessageDetail', component: 'messageDetail' },
]
})
.component('messageList', {
templateUrl: '/angular/spa/profile/components/messages/template/message-listing.template.html',
controllerAs: "model",
controller: ["$http", messageListController],
})
.component('messageDetail', {
templateUrl: '/angular/spa/profile/components/messages/template/message-detail.template.html',
controllerAs: "model",
bindings: { $router: '<' },
controller: ["$http", messageDetailController],
})
.component('messageBubble', {
templateUrl: '/angular/spa/profile/components/messages/template/message-bubble.template.html',
controllerAs: "model",
controller: ["$http", messageBubbleController],
bindings: {
message: '<',
user: '<'
},
});
function messageBubbleController($http) {
var model = this;
model.$onInit = function () {
model.currentUserId = $("#loggedInUserIdSignalR").val();
};
}
function messageDetailController($http) {
var model = this;
model.item = null;
model.user = null;
model.message = null;
model.loading = false;
model.chatHub = $.connection.chatHub;
model.$onInit = function () {
model.loading = true;
};
model.sendMessage = function () {
if (model.message.length > 0) {
console.log(model.messages.length);
model.chatHub.server.send(model.message, model.user.SubjectId, model.item.ItemId);
}
};
model.chatHub.client.broadcast = function (message, date, recipientId, itemId, senderId, senderNickName, senderPicture) {
$scope.$apply(function () {
model.messages.push({
ConnectionId: "",
DateSent: "/Date(1468852585430)/",
Message: message,
Sender: senderId,
});
});
console.log(model.messages.length);
console.log('New incoming message: ' + name + " ->" + message)
};
this.$routerOnActivate = function (next) {
var id = next.params.id;
fetchConversationMessages($http, id).then(function (response) {
model.loading = false;
model.uid = response.uid;
model.item = response.conversation;
model.user = response.conversation.User;
model.messages = response.conversation.messages;
});
};
function fetchConversationMessages($http, id) {
return $http.get("/profile/messages-data/" + id)
.then(function (response) {
console.log(response);
return response.data;
});
}
}
function messageListController($http) {
var model = this;
model.conversations = []
model.loading = false;
model.$onInit = function () {
model.loading = true;
fetchConversations($http).then(function (conversations) {
model.loading = false;
model.conversations = conversations.results;
console.log(model.conversations);
});
};
model.$routerOnActivate = function (next) {
console.log('messages list comp activated');
}
function fetchConversations($http) {
return $http.get("/profile/conversationsData")
.then(function (response) {
return response.data;
});
}
}
})();
在这个代码块中
model.chatHub.client.broadcast = function (message,date,recipientId,itemId,senderId,senderNickName,senderPicture) {
model.messages.push({
ConnectionId: "",
DateSent: "/Date(1468852585430)/",
Message: message,
Sender: senderId,
});
console.log(model.messages.length);
console.log('New incoming message: ' + name + " ->" + message)
};
是我获得新消息并将其推送到消息列表的地方,控制台日志显示更新的列表,但我的模板上有这个
<div class="chat-room">
<pre>{{model.messages.length}}</pre>
<message-bubble ng-repeat="msg in model.messages" message="msg" user="model.user"></message-bubble>
</div>
和这行代码
<pre>{{model.messages.length}}</pre>
仍然显示旧列表,我在另一篇帖子中读到,这是因为参考文献,但我尝试了很多不同的方法,但都没有成功。
无论在哪里推送新消息,都要更改:
model.chatHub.client.broadcast = function(...) {
model.messages.push({
ConnectionId: "",
DateSent: "/Date(1468852585430)/",
Message: message,
Sender: senderId,
});
};
进入:
model.chatHub.client.broadcast = function(...) {
$scope.$apply(function() {
model.messages.push({
ConnectionId: "",
DateSent: "/Date(1468852585430)/",
Message: message,
Sender: senderId,
});
});
};
另一个解决方案是为您的通信库找到angularjs包装器。
$scope.$apply
所做的基本上是它告诉AngularJS您的应用程序使用的数据发生了变化,需要运行再次执行摘要循环。正如您可能知道的,摘要循环检查更改的数据,并为更改的数据运行所有$watch
es,其中一些被ng-repeat
等指令用于更新DOM。
相关文章:
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- Redux处理新项目和id
- 如何更新localStorage项目
- JQuery Masonry.Ajax图标和“;加载新项目”;绳子放错地方了
- Ng-Repeat在末尾添加新项目
- AngularJs/GitHub :如何在没有任何历史记录的情况下将角度种子克隆到我的新项目中
- 每天从数组中挑选新项目
- 将jquery插件应用于angularJS ng repeat中的新项目
- 使用新项目更新KendoUI网格数据源
- AngularJS ForEach将新项目推送到对象中
- 比较两个数组,并通过使用 javascript 保留现有对象来更新新值
- 在 SharePoint 2010 上创建“添加新项目”按钮
- id:在续集中创建新项目时为空
- 当现有 Google 标记移动到另一个位置时,如何更新新的纬度和经度
- 如何在将新项目POST到服务器后更新ng重复
- 如何从MongoDB中提取项目,并在输入新项目时进行更新
- jQuery UI可排序:用新位置更新每个项目的隐藏输入值
- ng推送新项目时重复不更新
- 为什么添加新项目时我的列表金额计数不会更新
- 通过 JSP 表单插入新项目后更新列表