将外部异步 JavaScript API 适配为 AngularJS 框架

Question

我一直在尝试修改 API 的 JavaScript 代码来接收支付令牌，但我找不到创建运行该代码的函数的方法。 API 的原始示例效果很好，但我无法将代码转换为可重用的函数。我尝试了不同的方法，但总是遇到同样的错误：

TypeError: $scope.token is not a function

我在 Ionic 应用程序中使用此代码。请帮助我，我找不到解决方案。

API的原例：

$gn.ready(function(checkout) {
 
  var callback = function(error, response) {
    if(error) {
      // Error
      console.error(error);
    } else {
      // Success
      console.log(response);
    }
  };
 
  checkout.getPaymentToken({
    brand: 'visa', 
    number: '4012001038443335', 
    cvv: '123', 
    expiration_month: '05',
    expiration_year: '2018'
  }, callback);
 
});

我的代码：

$gn.ready(function(checkout) {

  $scope.token = function(b,n,c,m,y) {

    var callback = function(error, response) {

      if(error) {
        // Trata o erro ocorrido
        console.error(error);
      } else {
        // Trata a resposta
        console.log(response.data.payment_token);

      }
    };

    checkout.getPaymentToken({
      brand: b, // bandeira do cartão
      number: n, // número do cartão
      cvv: c, // código de segurança
      expiration_month: m, // mês de vencimento
      expiration_year: y // ano de vencimento
    }, callback);

  };

});

Answer 1

  $scope.getToken = function(checkout,b,n,c,m,y) {

    var callback = function(error, response) {

      if(error) {
        // Trata o erro ocorrido
        console.error(error);
      } else {
        // Trata a resposta
        console.log(response.data.payment_token);

      }
    };

    checkout.getPaymentToken({
      brand: b, // bandeira do cartão
      number: n, // número do cartão
      cvv: c, // código de segurança
      expiration_month: m, // mês de vencimento
      expiration_year: y // ano de vencimento
    }, callback);

  };




$gn.ready(function(checkout) {
  $scope.getToken(checkout,b,n,c,m,y);
});

根据我从示例中了解到的情况，应该这样做。

Answer 2

将 $gn 异步 API 放入服务中：

app.constant("gnAPI", $gn);

app.service("gnService", function(gnAPI,$q) {
    this.getPaymentToken = function(cardData) {
        var future = $q.defer();
        gnAPI.ready(function(checkout) {
            checkout.getPaymentToken(
                cardData,
                function callback(error, response) {
                   if (error) {
                       future.reject(error);
                   } else {
                       future.resolve(response);
                   };
                } 
            );
        });
        return future.promise;
    };
});

然后在控制器中使用：

var cardData = {
    brand: 'visa', 
    number: '4012001038443335', 
    cvv: '123', 
    expiration_month: '05',
    expiration_year: '2018'
};

gnService.getPaymentToken(cardData)
  .then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
    throw error;
});

通过使用 AngularJS $q 服务创建 $q 服务承诺，外部异步 API 将与 AngularJS 框架及其作用域摘要周期正确集成。

有关详细信息，请参阅 AngularJS $q Service API Reference。

将外部异步 JavaScript API 适配为 AngularJS 框架

Adapt External Asynchronous JavaScript API to AngularJS Framework

javascript

asynchronous

angularjs

angular-promise

ionic-v1