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

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>

<p ng-app="myApp" ng-controller="ctrl">
  <ul>
    <li ng-repeat="x in names">
      {{ x.Name }}
    </li>
  </ul>
  </p>
</p>

<script src="app.js"></script>
<script src="service.js"></script>
<script src="ctrl.js"></script>

</body>
</html>

结果:

可以看到，console.log打印出了从服务端get到的数据。我在想可能是http.get是异步函数，于是加了一个alert阻塞，但factory返回的还是原来的旧数据。请问大家如何解决呢？

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;

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

全部回复(4)

高洛峰2017-04-10 18:05:40 4楼

你需要$q 这个解决。。因为。。你在异步结果返回之前。。已经将return 返回了。。当然controller取不到数据了。。。
service

controller

xxService.getMaterial($scope.material,$scope.page).then(function(data){
            $scope.materialList=data.materialList;
            $scope.page=data.page;
        });

赞 +0

添加回复

PHP中文网2017-04-10 18:05:40 3楼

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

天蓬老师2017-04-10 18:05:40 2楼

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

黄舟2017-04-10 18:05:40 1楼

获取数据是异步的，当进入页面时数据还没回来，所以显示的还是旧数据，
用$q的正解