html完成加载之前，angularjs承诺和外部braintree.js脚本未获得价值

Question

I have to use external braintree.js script in order to generate a payment widget. I have no control over this. Here's the code for it that goes into my .html page:

 <div id="myClient" ng-show="false">{{myClientToken}}</div> <form id="checkout" action="actionURL" method="post" enctype="multipart/form-data"> <div id="payment-form"></div> <input type="hidden" name="amount" value="{{balance}}" /> <input type="hidden" name="uuid" value="{{uuid}}" /> <input type="hidden" name="ptype" value="custom" /> <input type="submit" id="paypal" value="Pay Now"> <!--form not shown to the user--> </form> <script src="https://js.braintreegateway.com/v2/braintree.js"></script> <script> $(document).ready(function() { var clientToken = $('#myClient').html(); braintree.setup(clientToken, "dropin", { container: "payment-form" }); }); </script> 

And in my controller I am successfully generating the token from my REST server:

  myFactory.getToken() .then(function(token) { $scope.myClientToken = token.data; 

However, as you might expect, the html finishes loading faster than the token gets returned to the controller.

This results in "misconfiguration" error, obviously, because braintree.js script expects the token which it does not get at the time it's called.

I tried ng-init and ng-if on the div, but to no avail.

Answer 1

Chain the startup of braintree after the retrieval of the token.

myFactory.getToken()
    .then(function(token) {
         $scope.myClientToken = token.data;
         return token.data;
     }) .then(function (clientToken) {
         braintree.setup(clientToken, "dropin", {
         container: "payment-form"
         });
     };