在AngularJS视图中无法获得ES6承诺值显示 [英] Can't get ES6 promise value to display in AngularJS view

问题描述

我正尝试使用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 。

$ q.when

将可能是值的对象或（第三方）随后承诺包装到 $ q 承诺。当你处理一个可能或可能不是承诺的对象，或者承诺来自不可信任的来源时，这很有用。

a href =https://docs.angularjs.org/api/ng/service/$q#when =noreferrer> - AngularJS $ q服务API参考 - $ 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'，{字段：'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.

$q.when

Wraps an object that might be a value or a (3rd party) then-able promise into a $q promise. This is useful when you are dealing with an object that might or might not be a promise, or if the promise comes from a source that can't be trusted.

— AngularJS $q Service API Reference - $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承诺值显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！