Angular $resource - 未返回数据

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 重复）

   <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 方式

Angular 视图将适用于您的 Promise，因此您只需将您的 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 会立即返回一个空对象，您可以将其嵌入到您的页面中，稍后将由响应内容填充。如果一切顺利，angular 应该 发现变化（因为它来自 angular 监控的 $resource 进程）并相应地更新您的视图。 因此，您观察到的行为是正常的：$promise 的前提是它将在稍后阶段完成，并且该过程应该继续进行。 解决方案：

试试吧：

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

如果您不需要对数据进行后处理，这应该就是您所需要的（除了您可能需要在视图中调用招聘人员工作），如果您的响应确实返回了一个包含工作数组的对象，并且不是数组本身）。该页面将显示，初始为空 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;
};

如果你真的需要等待你的数据（例如，因为有一些你需要它们的下游流程不能被推迟），你可以使用 Promise 来这样做：

$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 标志，您可以在页面中使用它来通知用户正在加载某些内容。