Question

我对JS和Angular都很初级，我正在尝试从API返回数据并将其存储在$ scope中。

一旦我存储了它，我想循环每个项目并将其输出到页面中，非常基本的东西。

我遇到的问题是API和数据存在，但它似乎在循环运行后返回，是否有任何方法使循环等待？

继承代码;

服务（点击端点并检索数据）

  'use strict';

  function RecruiterDashJobs($resource, API_URL) {
      var dashJobs = {};

      dashJobs.getJobs = function(uuid) {
          return $resource(API_URL + 'recruiters/' + uuid + '/jobs').get();
      }

      return dashJobs;

   }

   angular
       .module('app')
       .service('RecruiterDashJobs', RecruiterDashJobs);

控制器（调用服务并存储数据）

   $scope.currentRecruiter = User.getUser();

   $scope.getJobs = function(uuid) {
      var data = RecruiterDashJobs.getJobs(uuid);
      data.$promise.then(
          function(res) {
              return res.jobs
          },
          function(err) {
              return err;
          }
      )
   };

   $scope.recruiterJobs = $scope.getJobs($scope.currentRecruiter.uuid);

查看（Ng-repeat）

   <div class="panel border-bottom pad-s-2x pad-e-1x" ng-repeat="job in recruiterJobs">

       <div class="panel__body">

           <aside class="valign">
               <a class="icon--edit color--echo mar-r-2x" ui-sref="jobs/edit/{{job.uuid}"></a>
           </aside>
           <div class="valign">
               <p>{{job.title}}</p>
               <p class="color--charlie">Closing Date: {{job.closing_date}}</p>
           </div>

       </div>

  </div>

Answer 1

编辑：下面的“神奇”方法不再适用as of Angular 1.2

在getJobs方法中，return语句位于子函数内。您没有从getJobs返回数据，而是将其从您传递给then的函数返回。

两种解决方法：

Angular的神奇角度方式小于1.2

Angular视图适用于您的承诺，因此您只需将getJobs方法更改为：

$scope.getJobs = function(uuid) {
  var data = RecruiterDashJobs.getJobs(uuid);
  return data.$promise.then(
      function(res) {
          return res.jobs
      },
      function(err) {
          return err;
      }
  )
};

添加了return data.$promise...

如果您希望它仍然可以在Angular 1.2中使用，则需要在代码中的某处调用$parseProvider.unwrapPromises(true)，通常在主模块配置块上。

不太神奇的方式或Angular 1.2及以上

如果你想更好地了解发生了什么，那么你可以这样做

$scope.getJobs = function(uuid) {
  var data = RecruiterDashJobs.getJobs(uuid);
  data.$promise.then(
      function(res) {
          $scope.recruiterJobs = res.jobs
      },
      function(err) {
          console.log(err);
      }
  )
};

Answer 2

$ resource调用是异步的，但$ resource会立即返回一个空对象，您可以将其嵌入页面中，稍后将由响应内容填充。如果一切顺利，角度应发现更改（因为它来自角度监视器的$资源进程）并相应地更新您的视图。因此，您观察到的行为是正常的：$ promise的前提是它将在稍后阶段完成，并且该过程应该继续进行。解决方案：

只需尝试：

$scope.getJobs = function(uuid) {
   var data = RecruiterDashJobs.getJobs(uuid);
   return data;
};

如果您不需要后处理数据，这应该是您所需要的（除非您的响应确实返回包含作业数组的对象，否则您可能需要在视图中调用recruiterJobs.jobs），而不是数组本身）。页面将显示一个初始空div，然后在检索数据时更新，ng-repeat发现要添加到页面的新数据。如果您确实需要一些后期处理，您仍然可以使用回调：

$scope.getJobs = function(uuid) {
    var data = RecruiterDashJobs.getJobs(uuid);
    data.$promise.then(
        function(res) {
            //do something
        },
        function(err) {
            return err;
        }
    );
    return data;
};

如果你真的需要等待你的数据（例如因为有一些下游流程你需要它们而不能推迟），你可以使用诺言：

$scope.getJobs = function(uuid) {
    $scope.preparing = true;
    var data = RecruiterDashJobs.getJobs(uuid);
    data.$promise.then(function(res) {
        $scope.preparing = false;
        return data;      
    });
   };

这样，在解析promise之前，函数不会返回。我添加了一个可选的$ scope.preparing标志，您可以在页面中使用该标志来通知用户正在加载某些内容。

Angular $ resource - 未返回数据

2 个答案: