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