首页 > 开发 > JS > 正文

angualrjs在service中get请求能得到数据,但是为什么却无法返回到控制器当中使用?

2017-09-05 12:49:47  来源:网友分享

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;        });