Динамическое добавление URL-адреса в тег скрипта в AngularJs

Question

Я реализую платежный шлюз в свой СПА, построенный с помощью angularjs.

Проблема заключается в том, что этот платежный шлюз требует включения сценария с идентификатором платежа.

это моя текущая настройка .... (обратите внимание на контроллере просто запускает некоторые серверный скрипт, он возвращает всю информацию о платеже мне просто нужно, чтобы получить идентификатор)

Вот мой контроллер:

(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);