將外部異步JavaScript API調整爲Angular Framework

我一直在嘗試調整API的JavaScript代碼來接收付款令牌，但我找不到創建運行代碼的函數的方法。 API的原始示例效果很好，但我不能將代碼轉換爲可重用的函數。我嘗試不同的方法，但我總是得到同樣的錯誤：將外部異步JavaScript API調整爲Angular Framework

TypeError: $scope.token is not a function

我使用的是離子應用這裏面的代碼。請幫助我，我無法找到解決方案。

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

 
    }; 
 

 
});

來源

2017-01-05 Fillipe Rodrigues

什麼是$ gn？您應該使用美元前綴，這是保留角度。 – alphapilgrim

$ gn來自API的SDK。文檔細節很差，但這基本上是一個初始化函數，它可以調用「getPaymentToken」。 –

哪行代碼導致錯誤？ – georgeawg

把$ 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。

來源

2017-01-05 09:39:59 georgeawg

我試過了，但它在**函數回調（future.reject，future.resolve）中記錄錯誤**：「app.js：18未捕獲的SyntaxError：意外的令牌。」 –

雖然我的確很棒試圖使其工作。我是Angular和Ionic的新手，這就是爲什麼我一直在使用服務和異步API掙扎的原因。 –

嘗試最新的答案編輯。 – georgeawg

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

從我從這個應該這樣做的例子理解。

來源

2017-01-05 06:34:28

它可以工作，但仍然存在問題：每次啓動應用程序時都會運行$ scope.getToken函數。我想在點擊按鈕事件後運行它...我嘗試存儲該結帳並稍後使用它，但它不起作用。有什麼建議麼？ –

將外部異步JavaScript API調整爲Angular Framework

回答

相關問題