Braintree Drop in callback and Angular $ scope not working
I am trying to use drop braintree in UI in angular controller for example.
https://jsfiddle.net/6jmkwode/
function PaymentCtrl($scope) {
$scope.hasCalledBack = 'Nope';
braintree.setup('BRAINTREE_KEY',
'dropin', {
container: 'dropin',
onPaymentMethodReceived: function (obj) {
$scope.hasCalledBack = 'YEP!';
alert('Did the scope variable change? No? Well it should have....');
}
});
}
However, $ scope.hasCalledBack never changes in the callback even though an alert is fired.
+3
source to share
1 answer
Just wrap your $ scope callback code . $ apply () (nice article on this):
...
onPaymentMethodReceived: function (obj) {
$scope.$apply(function() {
$scope.hasCalledBack = 'YEP!';
alert('Did the scope variable change? Yes!');
});
}
...
$ apply () is used to execute an expression in angular from outside the angular framework. (For example, from browser DOM events, setTimeout, XHR, or third party libraries). Since we are going into an angular framework, we need to execute the correct lifecycle of all exception handling running the clock.
See updated Demo .
+3
source to share