Braintree Drop in callback и Angular $ scope не работает

Question

Я пытаюсь использовать падение Braintree в пользовательском интерфейсе в пределах углового контроллера, например.

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....'); 
     } 
    }); 
} 

Однако $ scope.hasCalledBack никогда не меняется в обратном вызове, даже думал пожаров предупреждений.

Answer 1

Просто оберните код обратного вызова $scope.$apply() (хороший article об этом):

... 
onPaymentMethodReceived: function (obj) { 
    $scope.$apply(function() { 
     $scope.hasCalledBack = 'YEP!'; 
     alert('Did the scope variable change? Yes!'); 
    }); 
} 
... 

$ применяются() используется для выполнения выражения в угловой из-за пределов угловой структуры. (Например, из событий браузера DOM, setTimeout, XHR или сторонних библиотек). Поскольку мы вызываем угловую структуру, нам необходимо выполнить правильный жизненный цикл обработки исключительных ситуаций, выполняющих часы.

См. Обновленный Demo.