Question

我正在使用angularjs构建我的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);
    };

然后当我得到网址时

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

            $scope.makeScript($scope.url);

动态地将URL添加到AngularJs中的脚本标记中

2 个答案: