且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

动态地将一个url添加到AngularJs的脚本标签中

更新时间:2023-12-05 08:08:34

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



单页应用程序 - 基于部分视图动态加载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