javascript - 如何避免在Angular中使用braintree.setup的多个实例？

我在模式窗口中有一个简单的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按钮，并且日志显示“就绪”。

我尝试使用如https://github.com/braintree/braintree-web/issues/29#issuecomment-137555915所述的拆解方式销毁braintree.setup实例，尽管它没有任何区别。

最佳答案

全面披露：我在Braintree工作。如果您还有其他疑问，请随时contact support。

每次调用$includeContentLoaded时，都要为$scope.displayModalBraintree设置新的侦听器。由于这些监听器没有被清除，因此您每次都创建一个新的监听器。因此，第二次运行$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/