Dynamically adding a url into a script tag in AngularJs

Question

I'm implementing a payment gateway into my SPA built with angularjs.

The problem is that this payment gateway requires you to include a script with a id of the payment.

this is my current setup.... (note the controller just runs some server-side script, it returns all information about the payment I just need to get the id)

Here is my controller:

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

.. and here is my view:

<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>

Trying to tackle the same problem with VR Pay ;) Could you solve it? — Michael W. Czechowski, Feb 18 '18 at 21:08

score 1 · Answer 1 · edited May 23 '17 at 12:15

1

don't think you can do that, scripts are loaded first before the bootstrapping stage takes place in angular. Look for lazy loading solution. This post seems to fit what you want to do:

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

edited May 23 '17 at 12:15

Community

1
1

answered Mar 30 '16 at 14:05

dannielum

346
1
10

score 0 · Answer 2 · answered Mar 30 '16 at 14:20

This feels really dirty but it works so I'm going with it...

Added this to my controller:

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

and then to this when I get the url

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

            $scope.makeScript($scope.url);

Dynamically adding a url into a script tag in AngularJs

2 Answers2

Linked