在AngularJs中动态地将url添加到脚本标记中

Dynamically adding a url into a script tag in AngularJs

本文关键字：脚本 添加 AngularJs 动态 url      更新时间：2023-10-12

我正在用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>

不要认为你能做到这一点，在angular中进行引导阶段之前，首先加载脚本。寻找延迟加载解决方案。这篇文章似乎适合你想做的事情：

单页应用程序-基于部分视图动态加载js文件

这感觉很脏，但它有效，所以我要用它…

添加到我的控制器：

    $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);
相关文章：