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

我有一個模式窗口的簡單布倫特裏付款方式：如何在Angular中避免braintree.setup的多個實例？

$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所解釋的，儘管它沒有任何區別。

來源

2015-10-08 longtimejones

^{完全披露：我在布倫特裏工作。如果您有任何其他問題，請隨時致電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功能。

來源

2015-10-09 16:34:59 BladeBarringer

_{我爲布倫特裏工作。}

自從發佈Github評論以來，我們已經更新了關於teardown的文檔。嘗試在您的拆解功能中設置integration = null，如code snippet here中所示。如果這不起作用，我建議發佈代碼teardown以幫助我們診斷您的問題。

來源

2015-10-08 19:01:58

謝謝'整合= null'沒有幫助，我在https://jsfiddle.net/7h242u3q/1/ 第一次公佈了非工作示例顯示模式窗口，日誌輸出： '準備對象{拆卸=函數（）} 拆卸對象{拆卸=函數（）} 歸零null' 第二時間顯示模式窗口，日誌輸出： '準備對象{拆卸=函數（）} 準備對象{teardown = function（）} teardown對象{teardown = function（）} null null' – longtimejones

我需要一個商家的工作流來添加多個支付細節..但是當我打電話通過給予merchant_id給客戶端的client_token，我得到的只是以前添加的沒有用於輸入新細節的表單的付款方法 –

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

回答

相關問題