如何在Angular中避免braintree.setup的多个实例?

时间:2015-10-08 08:27:17

标签: javascript angularjs paypal braintree

我在模态窗口中有一个简单的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所述,尽管它没有任何区别。

2 个答案:

答案 0 :(得分:2)

完全披露:我在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函数中提取它更有意义。

答案 1 :(得分:0)

我为Braintree工作。

自从Github评论发布以来,我们已经更新了有关拆解的文档。尝试在您的拆解功能中设置integration = null,如code snippet here中所示。如果这不起作用,我建议发布调用teardown的代码,以帮助我们诊断您的问题。