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

问题描述

我正尝试使用Pinterest JavaScript SDK获取某个项目的某些引脚数据。我在我的HomeController中创建的Pinterest服务中有一个方法。我尝试将响应放在promise中，以便将它放在我的HomeController的 $ scope 中，并将其显示在我的视图中。然而，$ scope.pins在我的视图中是未定义的。为什么未定义？似乎承诺正在工作。

Pinterest服务

 函数getBoardPins（id） {
 return new Promise（function（resolve，reject）{
 PDK.request（'/ v1 / boards /'+ id +'/ pins /'，'GET'，{fields：'id，链接，网址，创建者，董事会，created_at，注，颜色，计数，媒体，归属，图像，元数据'}，函数（响应）{
如果（响应）{
解析（响应）; 
} 
 
 reject（）; 
}）; 
}）; 
 
 $ / code> 





主控制器



<$ （函数（响应）{
$ scope.pins = response.data;
}）;


视图

 < H1> Pinterest的< / H1> 
< div ng-repeat =pin in pins> 
< div> {{pin}}< / div> 
< / div> 
  

解决方案

使用 $ 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 。

---

或者使用

  function getBoardPins（id）{
 // return new Promise（function（resolve，reject）{
 return $ q（function（resolve，reject）{
 PDK.request '/ v1 / boards /'+ id +'/ pins /'，'GET'，{字段：'id，链接，url，创建者，董事会，created_at，备注，颜色，计数，媒体，归因，图片，元数据' }，函数（response）{
 if（response）{
 resolve（response）; 
} 
 
 reject（）; 
}）; 
}）; 
} 
  

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

I'm trying to use the Pinterest JavaScript SDK to get some pin data for a project. I have a method in a Pinterest service I created that gets called in my HomeController. I tried throwing the response inside of a promise so I could put it on my HomeController's $scope and display it in my view. However, $scope.pins is undefined in my view. Why is it undefined? Seems like the promise is working. Still learning promises.

Pinterest Service

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

Home Controller

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

View

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

解决方案

Use $q.when to convert the ES6 promise to an AngularJS promise:

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

AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.

To bring an ES6 promise into the AngularJS execution context, use $q.when.

---

Alternately create the promise with the $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();
    });
  });
}

This creates a promise that is integrated with the AngularJS framework and its digest cycle.

这篇关于在AngularJS视图中无法获得ES6承诺值显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！