无法获得ES6承诺值以在AngularJS视图中显示

Question

我尝试使用Pinterest JavaScript SDK获取项目的一些引脚数据。我在我创建的Pinterest服务中有一个方法可以在我的HomeController中调用。我尝试在响应中抛出响应，这样我就可以将它放在我的HomeController $scope上并在我的视图中显示它。但是，在我看来，$ scope.pins是未定义的。为什么是undefined？似乎承诺正在发挥作用。还在学习承诺。

Pinterest服务

function getBoardPins (id) {
  return new Promise(function (resolve, reject) {
    PDK.request('/v1/boards/' + id + '/pins/', 'GET', {fields: 'id,link,url,creator,board,created_at,note,color,counts,media,attribution,image,metadata'}, function (response) {
      if (response) {
        resolve(response);
      }

      reject();
    });
  });
}

家庭控制器

Pinterest.getBoardPins('490329546869188172').then(function (response) {
  $scope.pins = response.data;
});

视图

<h1>Pinterest</h1>
<div ng-repeat="pin in pins">
  <div>{{pin}}</div>
</div>

Answer 1

使用$q.when将ES6承诺转换为AngularJS承诺：

$q.when(Pinterest.getBoardPins('490329546869188172'))
  .then(function (response) {
    $scope.pins = response.data;
});

AngularJS通过提供自己的事件处理循环来修改正常的JavaScript流程。这将JavaScript拆分为经典和AngularJS执行上下文。 只有在AngularJS执行上下文中应用的操作才会受益于AngularJS数据绑定，异常处理，属性监视等。

要将ES6承诺纳入AngularJS执行上下文，请使用$q.when。

  

$ q.when

     

将可能是值的对象或（第三方）随后的承诺包含到$q承诺中。当您处理可能会或可能不是承诺的对象，或者承诺来自不可信任的源时，这非常有用。

     

— AngularJS $q Service API Reference - $q.when

或者使用$q constructor.

创建承诺

function getBoardPins (id) {
  //return new Promise(function (resolve, reject) {
  return $q(function (resolve, reject) {
    PDK.request('/v1/boards/' + id + '/pins/', 'GET', {fields: 'id,link,url,creator,board,created_at,note,color,counts,media,attribution,image,metadata'}, function (response) {
      if (response) {
        resolve(response);
      }

      reject();
    });
  });
}

这创建了一个与AngularJS框架及其摘要周期集成的承诺。