Load external script only if ng-switch-when is a certain number

I am using AngularJS and Laravel. I have multiple forms in different steps by using ng-switch and ng-switch-when. I want to load braintree’s dropin UI when the step is equal to 4.

<div ng-controller="stepCtrl">
   <div class="col-xs-8">
      <div ng-switch="step">
         <!-- @{{step}} -->
         <div ng-switch-when="1">
            // first form
            <button ng-click="setStep(2)">Step 2</button>
         </div>

         <div ng-switch-when="2">
           // second form
           <button ng-click="setStep(3)">Step 3</button>
        </div>

        <div ng-switch-when="3">
           // third form 
           <button ng-click="setStep(4)">Step 4</button>
        </div>

        <div ng-switch-when="4">
         {{ Form::open(array('url'=>'/payment', 'id'=>'checkout', 'method'=>'post', 'autocomplete'=>'off')) }}

         <div id="dropin"></div>

         <input type="submit" value="Pay €@{{ total | number:2 }}" class="btn btn-primary pull-right">
         {{ Form::close() }}

         <script src="https://js.braintreegateway.com/v2/braintree.js"></script>
         <script>
         braintree.setup(
            "{{ $clientToken }}",
            'dropin', {
             container: 'dropin',
          });
         </script>

         <button ng-click="setStep(3)">Step 3</button>
      </div>
   </div>
</div>

Although, if the step isn’t the one which contains the #dropin I get

Uncaught Error: Unable to find valid container.

I’ve tried to wrap the scripts in ng-switch-when="4" with a div:

<div ng-show="step==4">//braintree scripts</div>

so that the scripts would get loaded only when the step is 4, but it doesn’t seem to work.

How can I fix this?


Source: laravel

Leave a Reply