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

1946

发布于
2016-03-29

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返回的还是原来的旧数据。请问大家如何解决呢？

javascript angularjs

阅读 4.2k

4 个回答

夜店小新新

✓ 已被采纳

你需要$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;
        });

tablecell

1.5k165113

发布于
2016-03-29

应该返回函数,而不是返回数据

app.factory('Items', function($http) {
  
  var list=
  [
      {Name: 'name4'},
      {Name: 'name5'},
  ];

 return {
    query: function() {
      return $http.get('http://localhost:3000/test.json');   
    }
  };


});
app.controller('ctrl', function($scope,Items) {
  Items.query().then(function(d) {  
      $scope.names = d.data;
  });

zmen

511

发布于
2016-03-30

新手上路，请多包涵

确实是异步的问题。
不过想用alert的方法来阻塞……我感觉是不行的……感觉总有点怪怪的……明天起床再验证下……
用楼上的方法，将请求放到返回的对象里，应该是可行的。
还有一个方法你可以试下，不要直接list=data ，这样重写了list,引用也没了。可以试试用数组的push,pop方法导入数据，或者直接list[0]=...这样，应该就能保留引用以更新数据了。