如何避免在Angular中使用braintree.setup的多個實例？

Question

我在模式窗口中有一個簡單的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所述 ，盡管沒有任何區別。

Answer 1

^{全面披露：我在Braintree工作。 如果您還有其他疑問，請隨時與支持小組聯系 。}

每次調用$scope.displayModalBraintree都要為$includeContentLoaded設置一個新的偵聽$scope.displayModalBraintree 。 由於這些監聽器沒有被清除，因此您每次都創建一個新的監聽器。 因此，第二次運行$scope.displayModalBraintree ，它將兩次調用braintree.setup 。 第三次運行它，因為現在有三個偵聽器，所以它運行了三次。

一種解決方案是在$scope.displayModalBraintree外部設置偵聽$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函數中提取出來更有意義。

Answer 2

_{我為Braintree工作。}

自從發布Github評論以來，我們已經更新了有關拆卸的文檔。 嘗試在您的拆卸函數中設置integration = null ，如此處的代碼片段所示 。 如果這不起作用，建議您在調用teardown的地方發布代碼，以幫助我們診斷您的問題。