更新$ rootScope后,ng-repeat不会更新

时间:2016-03-24 16:08:25

标签: javascript angularjs socket.io

如何通过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');
        }
    }
 }
})();

0 个答案:

没有答案