angualrjs在service中get请求能得到数据,但是却无法返回到控制器当中使用。
服务端json数据
var data= [ {Name:'name1'}, {Name:'name2'}, {Name:'name3'} ]
客户端
service.js
app.factory('Items', function($http) { var list= [ {Name: 'name4'}, {Name: 'name5'}, ]; $http.get("http://localhost:3000/test").success(function(data) { list=data;//get到的数据赋给list console.log(list[0].Name); }); alert('success'); return { query:function() {return list;}, }});
ctrl.js
app.controller('ctrl', function($scope,Items) { $scope.names=Items.query();});
index.html
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head><body><div ng-app="myApp" ng-controller="ctrl"> <ul> <li ng-repeat="x in names"> {{ x.Name }} </li> </ul> </div></div><script src="app.js"></script><script src="service.js"></script><script src="ctrl.js"></script></body></html>
结果:
可以看到,console.log打印出了从服务端get到的数据。我在想可能是http.get是异步函数,于是加了一个alert阻塞,但factory返回的还是原来的旧数据。请问大家如何解决呢?
解决方案
你需要$q 这个解决。。因为。。你在异步结果返回之前。。已经将return 返回了。。当然controller取不到数据了。。。
service
this.getMaterial=function(material,page){ var defer=$q.defer(); $http.get("http://localhost:3000/test").success(function(data) { if(error==null){ defer.resolve(data); }else{ defer.reject(error.message); } }); }; return defer.promise;
controller
xxService.getMaterial($scope.material,$scope.page).then(function(data){ $scope.materialList=data.materialList; $scope.page=data.page; });