如何通过socket.io
接收数据后,使ng-repeat正确更新视图我已经验证$ rootScope正在更新,但我在ng-repeat中的视图没有向我显示新数据。
这是我的通知,我通过socket.io
接收数据notifications:function(){
if($rootScope.$storage.satellizer_token){
var socket = io(document.domain+':3000', {query: "Authorization="+$rootScope.$storage.satellizer_token});
if($rootScope.$storage['ngStorage-userData']){
var user = JSON.parse($rootScope.$storage['ngStorage-userData']).id;
$rootScope.openSockets.push('notifications');
socket.on('userNotifications.'+ user+':App\\Events\\notifications', function(message){
var m = JSON.parse(message);
var n = JSON.parse(m.data.message);
//console.log(n.type);
$rootScope.notifications[n.type].items.push(n);
$rootScope.notifications[n.type].unread++;
$rootScope.$apply(function(){
console.log('scope updated');
});
});
}
}
}
我的观点按以下方式设置
li.dropdown.dropdown-list(uib-dropdown="")
a(uib-dropdown-toggle="" md-ink-ripple="")
em.fa(ng-class="'fa-'+notifications.HelpDesk.icon")
.label.label-danger(ng-if="notifications.HelpDesk.unread > 0") {{notifications.HelpDesk.unread}}
ul.dropdown-menu(class="animated flipInX")
li(ng-repeat="item in notifications.HelpDesk.items | limitTo:10" ng-if="item.read == 0")
// START list group
.list-group
// list item
a.list-group-item
.media-box
.pull-left
em.fa.fa-2x.text-info(ng-class='"fa-"+item.icon')
.media-box-body.clearfix
p.m0 {{item.title}}
p.m0.text-muted: small {{item.content}}
a.list-group-item(href='' ng-if="notifications.HelpDesk.items.length == 0")
.media-box
.pull-left
em.fa(ng-class="'fa-'+notifications.HelpDesk.icon")
.media-box-body.clearfix
small No unread notifications.
a.list-group-item(href='' ng-if="notifications.HelpDesk.items.length > 10")
small More notifications
.label.label-success.pull-right {{notifications.HelpDesk.items.length - 10}}
正如您所看到的,我只是使用简单的ng-repeat指令来从json对象中吐出数据。
模型正在dom notifications.HelpDesk.unread
中更新此值,但li(ng-repeat="item in notifications.HelpDesk.items | limitTo:10" ng-if="item.read == 0")
我的工厂如下所示
(function() {
'use strict';
angular
.module('app.notifications')
.factory('Notifications', Notifications);
Notifications.$inject = ['$http','$rootScope'];
function Notifications($http,$rootScope) {
return {
load:function(){
$rootScope.notifications = {
All:{
"label":"All",
"icon":"bell",
"unread":0,
},
Alert:{
"label":"Alerts",
"icon":"exclamation-triangle",
"items":[],
"unread":0,
},
HelpDesk:{
"label":"Help Desk",
"icon":"life-ring",
"items":[],
"unread":0,
"sref":"app.helpDesk"
},
Message:{
"label":"Messages",
"icon":"inbox",
"items":[],
"unread":0,
"sref":"app.message-center"
}
};
this.list().then(function(res){
if(res){
if(res.status === 200){
angular.forEach(res.data,function(value,key){
if(!value.read){
$rootScope.notifications[value.type].unread++;
$rootScope.notifications.All.unread++;
}
$rootScope.notifications[value.type].items.push(value);
});
}
}
});
},
list:function(){
return $http.get('api/notifications');
}
}
}
})();