将 url 动态添加到 AngularJs 中的脚本标签中答案

【问题标题】：Dynamically adding a url into a script tag in AngularJs将 url 动态添加到 AngularJs 中的脚本标签中
【发布时间】：2016-07-18 14:08:46
【问题描述】：

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

【问题讨论】：

尝试用 VR Pay 解决同样的问题 ;) 你能解决吗？
顺便说一句，您应该清除问题中的脚本网址。

标签： javascript angularjs dynamic lazy-loading

【解决方案1】：

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

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

【讨论】：

【解决方案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);

【讨论】：