Braintree多个设置调用在多个onPaymentMethodReceived事件中产生

Question

我正在使用角度,在angularUI模式窗口中,我想显示Braintree中的Drop In表单以获得付款方式.因此,我创建了通常的form(partial.html):

<form id="creditCard" >
   <div id="dropin"></div>  
   <button type="submit" id="btnPay" >Pay</button>  
</form>

然后我用这个显示模态:

var modalInstance = $modal.open({
   templateUrl: 'partial.html',
   controller: 'ModalController'
});

ModalController包含对Braintree设置的调用:

braintree.setup($scope.clientToken, 'dropin', {
   container: 'dropin',
   onPaymentMethodReceived: function (result) {
       $scope.$apply(function() {
           $scope.success = true;
           // Do something else with result
       });
   }
});

这将很好地显示braintree的Drop In表单(设置生成表单)并接受信用卡和到期日期,到目前为止一切正常.

问题是,每次调用模态时,都会执行ModalController,因此braintree.setup()也会执行.然后,当我输入信用卡号码和到期日期并点击付款时,onPaymentMethodReceived()每次设置执行都会触发一次事件!也就是说,如果我第一次调用模态,它将触发事件一次,第二次触发它两次,依此类推.就像每次调用setup时一样,会创建一个新的事件挂钩.

有关如何避免这种情况的任何想法？有没有办法"解除绑定" onPaymentMethodReceived()事件处理程序？我需要多次调用设置,因为每次调用模态时,clientToken可能已经更改.

感谢您提供帮助的任何帮助或指针.

Answer 1

在 Angular 中多次调用braintree.setup似乎是不可避免的，要么是出于询问者的原因，要么只是因为setup在控制器中调用，该控制器可能在浏览会话 \xe2\x80\x93 中多次实例化，例如购物车或结帐控制器。

\n\n

你可以这样做：

\n\n

$rootScope.success = false;\nbraintree.setup($scope.clientToken, \'dropin\', {\n   container: \'dropin\',\n   onPaymentMethodReceived: function (result) {\n       if(!$rootScope.success) {\n           $scope.$apply(function() {\n               $rootScope.success = true;\n               // Do something else with result\n           });\n       }\n   }\n});\n

\n\n

我发现我无法避免多次触发回调（每次我重新访问视图时，次数似乎都会爆炸 - 哎呀），但我可以测试我是否执行了响应回调的操作。由于$scope如果我离开视图，它将被破坏，$scope.success因此在我需要时会有效地重置。因为每个新控制器都有自己的$scope，所以success在 上设置一个标志$scope可能只会停止额外的执行$scope（即使控制器已被“销毁”，回调似乎仍然可用），所以我发现使用$rootScope仅意味着即使我多次重新实例化控制器，总共也会执行一次。$rootScope.success = false在控制器中设置意味着一旦控制器加载，回调将重新成功一次\xe2\x80\x93。

\n