AngularJS Long Polling - 将结果推送到列表

时间:2014-06-20 08:30:50

标签: angularjs long-polling

目前我可以将长轮询结果推送到$ scope.newMsg变量,但是我想将它添加到消息列表$ scope.messages.push(msg)中。

这是我目前的app.js:

var messageApp = angular.module('messageApp', ['ngResource']);
messageApp.run(function(newMessagePoller) {});

messageApp.factory('messagesService', function($resource) {
    return $resource('/myapp/resources/message/all', {}, {
        query: {method: 'GET', isArray: true}
    });
});

messageApp.factory('newMessagePoller', function($http, $timeout) {
    var data = {response: {}};
    var poller = function() {
        $http.get('/myapp/newmsg').then(function(r) {
            data.response = r.data;
            $timeout(poller, 1);
        });
    };
    poller();
    return {data: data};
});

messageApp.factory('createMessageService', function($resource) {
    return $resource('/myapp/resources/message', {}, {
        create: {method: 'POST'}
    });
});

messageApp.factory('messageService', function($resource) {
    return $resource('/myapp/resources/message/:id', {}, {
        show: {method: 'GET'},
        update: {method: 'PUT', params: {id: '@id'}},
        delete: {method: 'DELETE', params: {id: '@id'}}
    });
});
messageApp.controller('messageCtrl', function($scope, newMessagePoller, createMessageService, messagesService, messageService) {
    $scope.messages = messagesService.query();
    $scope.newMsg = newMessagePoller.data;

    $scope.newMessage = function() {
        var newEntry = createMessageService.create($scope.message);
        $scope.messages.push(newEntry);
    };

    $scope.deleteMessage = function(msg) {
        messageService.delete({id: msg.id});
        $scope.messages.splice($.inArray(msg, $scope.messages), 1);
    };

    $scope.updateMessage = function(message) {
        messageService.update(message);
    };
});

我尝试将控制器传递给newMessagePoller:

messageApp.factory('newMessagePoller', function($http, $timeout, messageController) {
    var data = {response: {}};
    var poller = function() {
        $http.get('/basic-angularjs-ee/newmsg').then(function(r) {
            data.response = r.data;
            $timeout(poller, 1);
        });
    };
    poller();
    messagePoller.pushNewMessage(data.response);
});
...

$scope.pushNewMessage(msg) {
   $scope.messages.push(msg);
}

我想我的方法是错的,任何帮助都会非常感激。

**工作代码** 我必须进行以下更改才能使代码正常工作(谢谢domakas):

messageApp.factory('newMessagePoller', function($http, $timeout) {
    var data = {data: ''};
    var poller = function() {
        $http.get('/myapp/newmsg').then(function(r) {
            data.data =  r.data;
            $timeout(poller, 1);
        });
    };
    poller();
    return data;
});

分配对json结构的data属性的响应。

$scope.$watch(
        function() { return newMessagePoller.data; }, 
        function(newMsg, oldMsg) {
            $scope.newMsg = newMsg;
            $scope.messages.push(newMsg);
        }
);

将$ watch功能添加到控制器。

1 个答案:

答案 0 :(得分:4)

很难理解这里的最终目标是什么,但我认为您应该在控制器中为newMessagePoller创建观察者并在那里发送消息:

$scope.$watch(function() { return newMessagePoller.data; }, function(new, old) {
    if(new !== old) {
        $scope.messages.push(new);
    }
});