我在模态窗口中有一个简单的 Braintree 付款表单:
$scope.displayModalBraintree = function () {
$scope.modal = 'modal_payment_form.html', $scope.$on('$includeContentLoaded', function () {
braintree.setup('tokenStringFromServer', 'paypal', {
container: 'paypal',
locale: 'da_dk',
onReady: function (integration) {
console.log('ready', integration)
}
})
})
})
单击按钮会执行 displayModalBraintree,第一次一切正常。然而,第二次单击按钮会生成两个 Paypal 按钮,并且日志显示准备就绪。
我已尝试使用拆卸来破坏 braintree.setup 实例,如 https://github.com/braintree/braintree-web/issues/29#issuecomment-137555915 中所述。 ,尽管它没有任何区别。
最佳答案
完全披露:我在 Braintree 工作。如果您还有任何问题,欢迎随时contact support .
每次调用 $scope.displayModalBraintree
时,您都会为 $includeContentLoaded
设置一个新的监听器。由于这些监听器没有得到清理,因此您每次都创建一个新的。因此,您第二次运行 $scope.displayModalBraintree
时,它会调用 braintree.setup
两次。第三次运行它,因为现在有三个监听器,所以它运行三次。
一种解决方案是在 $scope.displayModalBraintree
之外设置监听器,如下所示:
var clientToken, braintreeVault;
$scope.$on('$includeContentLoaded', function () {
braintree.setup(clientToken, 'paypal', {
container: 'paypal',
onReady: function (integration) {
braintreeVault = integration;
}
})
});
$scope.displayModalBraintree = function () {
$scope.getToken().then(function (token) {
clientToken = token;
$scope.modal = 'modal_payment_form?' + (new Date().getTime());
})
};
另一种选择是在加载模式后销毁监听器,但我认为将其从 $scope.displayModalBraintree
函数中提取出来更有意义。
关于javascript - 如何避免在 Angular 中出现多个 braintree.setup 实例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33010452/