将数据检索代码(websockets)移动到AngularJS控制器中

将数据检索代码(websockets)移动到AngularJS控制器中,angularjs,angularjs-service,Angularjs,Angularjs Service,我编写了以下基本的AngularJS应用程序。到目前为止,它所做的只是设置一个websocket端,请求从中获取一些数据 这个实现是有效的。我接下来要做的是把这个代码放在它的服务中。考虑到这一点,我想知道我将如何检索数据。只要websocket代码在控制器中,我就可以更新onmessage方法中的“entries”数组 如何从服务获取数据。如何将我的entries数组“附加”到服务并由服务更新它 var mbclient = angular.module('mbclient', ['ng

我编写了以下基本的AngularJS应用程序。到目前为止,它所做的只是设置一个websocket端,请求从中获取一些数据

这个实现是有效的。我接下来要做的是把这个代码放在它的服务中。考虑到这一点,我想知道我将如何检索数据。只要websocket代码在控制器中,我就可以更新onmessage方法中的“entries”数组

如何从服务获取数据。如何将我的entries数组“附加”到服务并由服务更新它

    var mbclient = angular.module('mbclient', ['ngRoute']);

    mbclient.config(function ($routeProvider) {

    $routeProvider
        .when('/', {
            templateUrl: 'pages/home.html',
            controller: 'homeController',
            controllerAs: 'homeController'
        });
    });

    mbclient.controller('homeController', ['$log', '$scope', function ($log, $scope) {

    var self = this;
    this.dateFormat = 'dd.MM.yyyy';

    this.entries = [];

    var websocket = new WebSocket("ws://christians-MBP.fritz.box:8888");

    websocket.onopen = function () {
        $log.info("Socket has been opened");

        var message = JSON.stringify(self.entries);
        websocket.send(message);
    };

    websocket.onclose = function () {
        $log.info("Socket has been closed");
    };

    websocket.onmessage = function (event) {
        $log.debug("A message has been received");

        self.entries = JSON.parse(event.data);
        $scope.$digest();
    };
    }]);

您可以使用websocket方法和数据字段创建服务。您可以使用引用在控制器和服务之间共享数据

mbclient.config(function ($routeProvider) {

    $routeProvider
        .when('/', {
            templateUrl: 'pages/home.html',
            controller: 'homeController',
            controllerAs: 'homeController'
        });
    });

mbclient.service('webSocketService', ['$log',function($log){

this.entries = []; 

//WebSockets here for example

 websocket.onmessage = function (event) {
        angular.extend(this.entries, JSON.parse(event.data));  
    };

}]);

    mbclient.controller('homeController', ['$log', '$scope', 'webSocketService', function ($log, $scope,webSocketService) {

    var self = this;
    this.dateFormat = 'dd.MM.yyyy';

    this.entries = webSocketService.entries;

   }

无法将新数组分配给数据处于服务中的字段,因为您丢失了引用。您必须在此字段上操作。

您好,谢谢您的提示。这当然是双向绑定的魔力;)使用您的代码,我得到了以下错误:uu Uncaught TypeError:无法读取未定义的属性“$$hashKey”uu我猜我的JSON坏了?!下面是它的外观:**[{“日期”:“2015-02-26T18:50:17.254Z”,“目的”:“每周杂货购物”,“金额”:64,$$hashKey:“003”}]**将其更改为angular.extend(self.entries,JSON.parse(event.data));不再抛出错误。但视图未更新。请尝试更改angular.extend到foreach并按。