AngularJsのスクリプトタグにURLを動的に追加

Question

私は、anglejsで構築されたSPAに支払いゲートウェイを実装しています。

この支払いゲートウェイでは、支払いのIDを持つスクリプトを含める必要があるという問題があります。

これは私の現在の設定.... （コントローラは、単にいくつかのサーバー側のスクリプトを実行します注意してください、それは私だけでIDを取得する必要があり、支払いに関するすべての情報を返します）

ここでは私のコントローラです。

(function(){ 

var PaymentGateController = function ($scope, $rootScope, $state, paymentFactory, $sce) { 

    $scope.ready = false; 

    paymentFactory.getResult() 
     .then(function (result) { 
      $scope.ready = true; 
      $scope.url = result.data.id; 
     }, function(error) { 
      console.log(error); 
     }); 
} 

PaymentGateController.$inject = ['$scope', '$rootScope','$state', 'paymentFactory', '$sce']; 

angular.module('hcbcApp.paymentGate', []).controller('PaymentGateController', PaymentGateController); 
}()); 

...と、ここでは、私の見解である：

<div ng-if="ready"> 
    <form action="https://peachpayments.docs.oppwa.com/tutorials/integration-guide#" class="paymentWidgets">VISA MASTER AMEX</form> 
    <script type="text/javascript" src="https://test.oppwa.com/v1/paymentWidgets.js?checkoutId={{url}}"></script> 
</div> 

Answer 1

あなたはスクリプトがブートストラップ段階の前に最初に読み込まれるようにして行うことができるとは思いません角度で起こる。遅延読み込みソリューションを探します。この投稿は、あなたが何をしたいかを合わせているようだ：

Single page application - load js file dynamically based on partial view

Answer 2

これは本当に汚い感じているが、それはので、私はそれで行くよ動作します...

は私のコントローラにこれを追加しました：

$scope.makeScript = function (url) { 
     var script = document.createElement('script'); 
     script.setAttribute('src', url); 
     script.setAttribute('type', 'text/javascript'); 
     document.getElementById('paymentDiv').appendChild(script); 
    }; 

、その後、これに、私は同じ問題に取り組むためにしようと、URL

  $scope.url = "https://test.oppwa.com/v1/paymentWidgets.js?checkoutId=" + result.data.id; 

      $scope.makeScript($scope.url);