我正在使用角度,而在一个angularUI模态窗口中,我想从Braintree显示Drop In形式以获取付款方式.因此,我创建通常的形式(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()事件处理程序？我确实需要多次调用setup,因为每次调用modal时,clientToken可能已经改变了.
感谢任何帮助或帮助的指针.
解决方法
调用braintree.setup多次角度似乎是不可避免的,无论是asker的原因,还是仅仅因为在一个控制器中调用可能在浏览会话中多次实例化的设置 – 比如购物车或结账控制器.
你可以这样做：
$rootScope.success = false;
braintree.setup($scope.clientToken,onPaymentMethodReceived: function (result) {
if(!$rootScope.success) {
$scope.$apply(function() {
$rootScope.success = true;
// Do something else with result
});
}
}
});
我发现我无法避免多次回叫(每次我重新访问视图 – yikes时,似乎都会爆炸),但是我可以测试是否已经执行了我的回复操作.由于$scope将被销毁,如果我离开视图,$scope.success有效地重置,当我需要它.因为每个新的控制器都有自己的$范围,所以在$scope上设置一个成功标志可能只会停止该$范围的额外执行(即使控制器已被“销毁”,这似乎仍然可用于回调)所以我发现使用$rootScope意味着只有一个执行总计,即使我重新实例化了控制器多次.在控制器中设置$rootScope.success = false意味着一旦控制器加载,回调将重新成功 – 一次.
