AngularJS 服务获取数据,但没有 return 将其发送给控制器?
AngularJS service gets the data, but doesn`t return it to the controller?
scope.membersWarnings 在controller中总是空的,但在service中它从服务器获取数据。不知何故,我的服务器数据在服务和控制器中的 get 函数回调之间丢失了。
控制器:
AndreaApp.controller('MemberDetailController', ['$scope', '$rootScope','$http','$location','$routeParams','MemberService','MemberGroupsService','ArrivalsService','WarningsService','NotificationsService',function (scope,rootScope, http,location,routeParams,MemberService,MemberGroupsService,ArrivalsService,WarningsService,NotificationsService) {
scope.member = MemberService.get(routeParams.id);
scope.membersGroup = MemberService.membersGroup(routeParams.id);
scope.membersWarnings = WarningsService.get(routeParams.id);
scope.editMember = function(id){
location.path('/editMember/'+id);
}
scope.membersDocument = function(id){
location.path('/membersDocument/'+id);
}
scope.templates =
[ { name: 'packages.html', url: 'views/members/packages.html'},
{ name: 'notifications.html', url: 'views/members/notifications.html'},
{ name: 'warnings.html', url: 'views/members/warnings.html'},
{ name: 'arrivals.html', url: 'views/members/arrivals.html'} ];
scope.template = scope.templates[0];
scope.loadTemplate = function(templateId){
if(templateId == 3){
scope.arrivals = ArrivalsService.get(routeParams.id).arrivalsId;
console.log(scope.arrivals);
}
scope.template = scope.templates[templateId];
}}]);
警告服务:
AndreaApp.service('WarningsService', function ($http,$q) {
var warnings = [];
this.save = function (warnings, memberId) {
$http.post('/api/warnings/new/member/'+memberId,
{
name: warnings.name,
description: warnings.description,
readed: false,
clanId: memberId
}).
success(function(data, status, headers, config) {
}).
error(function(data, status, headers, config) {
alert("Error occurred while adding a warning. HTTP Respone: " + status);
});
}
this.get = function (id) {
var deferred = $q.defer();
$http.get('/api/warnings/member/'+id).
success(function(data, status, headers, config) {
warnings.length = 0;
console.log(data);
for(var i = 0; i < data.length; i++){
warnings.push(data[i]);
}
deferred.resolve(data);
//data exists here, it is not empty
}).
error(function(data, status, headers, config) {
alert("HTTP status:" + status)
});
return deferred;
}});
您可以 return $http,像这样:
this.get = function (id) {
return $http.get('/api/warnings/member/'+id);
}
然后就可以在Controller上使用了
WarningsService.get(routeParams.id).then(function(result){
$scope.membersWarnings = result.data; // or just result
});
您不能像现在这样直接赋值,因为您是在 return 以这种方式做出承诺。结果暂时还没出来
scope.member = MemberService.get(routeParams.id);
应该是
MemberService.get(routeParams.id).then(function(data) {
scope.member = data;
});
这是因为你的get方法是返回一个promise,所以一旦resolved,你就可以获取到数据了。
另外,你的get方法需要改成
return deferred.promise;
scope.membersWarnings 在controller中总是空的,但在service中它从服务器获取数据。不知何故,我的服务器数据在服务和控制器中的 get 函数回调之间丢失了。
控制器:
AndreaApp.controller('MemberDetailController', ['$scope', '$rootScope','$http','$location','$routeParams','MemberService','MemberGroupsService','ArrivalsService','WarningsService','NotificationsService',function (scope,rootScope, http,location,routeParams,MemberService,MemberGroupsService,ArrivalsService,WarningsService,NotificationsService) {
scope.member = MemberService.get(routeParams.id);
scope.membersGroup = MemberService.membersGroup(routeParams.id);
scope.membersWarnings = WarningsService.get(routeParams.id);
scope.editMember = function(id){
location.path('/editMember/'+id);
}
scope.membersDocument = function(id){
location.path('/membersDocument/'+id);
}
scope.templates =
[ { name: 'packages.html', url: 'views/members/packages.html'},
{ name: 'notifications.html', url: 'views/members/notifications.html'},
{ name: 'warnings.html', url: 'views/members/warnings.html'},
{ name: 'arrivals.html', url: 'views/members/arrivals.html'} ];
scope.template = scope.templates[0];
scope.loadTemplate = function(templateId){
if(templateId == 3){
scope.arrivals = ArrivalsService.get(routeParams.id).arrivalsId;
console.log(scope.arrivals);
}
scope.template = scope.templates[templateId];
}}]);
警告服务:
AndreaApp.service('WarningsService', function ($http,$q) {
var warnings = [];
this.save = function (warnings, memberId) {
$http.post('/api/warnings/new/member/'+memberId,
{
name: warnings.name,
description: warnings.description,
readed: false,
clanId: memberId
}).
success(function(data, status, headers, config) {
}).
error(function(data, status, headers, config) {
alert("Error occurred while adding a warning. HTTP Respone: " + status);
});
}
this.get = function (id) {
var deferred = $q.defer();
$http.get('/api/warnings/member/'+id).
success(function(data, status, headers, config) {
warnings.length = 0;
console.log(data);
for(var i = 0; i < data.length; i++){
warnings.push(data[i]);
}
deferred.resolve(data);
//data exists here, it is not empty
}).
error(function(data, status, headers, config) {
alert("HTTP status:" + status)
});
return deferred;
}});
您可以 return $http,像这样:
this.get = function (id) {
return $http.get('/api/warnings/member/'+id);
}
然后就可以在Controller上使用了
WarningsService.get(routeParams.id).then(function(result){
$scope.membersWarnings = result.data; // or just result
});
您不能像现在这样直接赋值,因为您是在 return 以这种方式做出承诺。结果暂时还没出来
scope.member = MemberService.get(routeParams.id);
应该是
MemberService.get(routeParams.id).then(function(data) {
scope.member = data;
});
这是因为你的get方法是返回一个promise,所以一旦resolved,你就可以获取到数据了。
另外,你的get方法需要改成
return deferred.promise;