CODEWITHSUNDEEP
javascriptangularjsbraintree
Josh Stuart
Josh Stuart

Reputation: 1528

Braintree Drop in callback and Angular $scope doesn't work

I am trying to utilize the braintree drop in UI within an angular controller eg.

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 the $scope.hasCalledBack never changes in the callback even thought the alert fires.

Upvotes: 3

Views: 512

Answers (1)

Ilya Luzyanin
Ilya Luzyanin

Reputation: 8110

Simply wrap your callback code with $scope.$apply() (nice article about it):

...
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 of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the angular framework we need to perform proper scope life cycle of exception handling, executing watches.

See updated Demo.

Upvotes: 3

Related Questions