动态地将一个url添加到AngularJs的脚本标签中 [英] Dynamically adding a url into a script tag in AngularJs

问题描述

问题是这个支付网关需要你包含一个id为付款。

这是我当前的设置....
（注意，控制器只是运行一些服务器端脚本，它返回有关付款的所有信息I只需要获得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 = ['$范围'，'$ rootScope'，'$ state'，'paymentFactory'，'$ sce']; 
 
 angular.modul e（'hcbcApp.paymentGate'，[]）。controller（'PaymentGateController'，PaymentGateController）; 
}（））; 
  

..这里是我的观点：

 < divng-if =ready> 
< form action =https://peachpayments.docs.oppwa.com/tutorials/integration-guide#class =paymentWidgets> VISA MASTER AMEX< / form> 
< script type =text / javascriptsrc =https://test.oppwa.com/v1/paymentWidgets.js?checkoutId={{url}}>< / script> 
< / div> 
  

解决方案

不要以为你可以这样做，脚本是在引导阶段发生角度之前首先加载。寻找延迟加载解决方案。这个帖子似乎适合你想做的：

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

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>

解决方案

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

这篇关于动态地将一个url添加到AngularJs的脚本标签中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！