渲染<脚本>angularjs 中的标签 [英] render <script> tag in angularjs

问题描述

我正在尝试将 paypal 的付款按钮添加到我的 angularjs 应用程序中，

I'm trying to add paypal's pay button to my angularjs app,

$scope.paypal ='<script async="async" src="https://www.paypalobjects.com/js/external/paypal-button.min.js?merchant=DJOEURGOJ97S"'+ 
              'data-button="buynow"'+
              'data-name="socks"'+
              'data-quantity="1"'+ 
              'data-amount="{{dollarValue}}"'+
              'data-currency="USD"'+ 
              'data-shipping="0"'+
              'data-tax="0"'+
              'data-callback="https://gamerhoic.com/ipn/data.php"'+
          '></script>';

如果就这么简单，那就太棒了.

It would be so awesome IF it was just that easy.

我尝试了很多建议，包括添加 ng-santize 和 $sce.trustAsHtml；

I've tried a number of suggestions including adding ng-santize and $sce.trustAsHtml;

$sce.trustAsHtml('<script></script>');

我通读了 在 Angular 中绑定数据通过 $sce.trustAsHtml 添加字符串中的 js 彻底但它比我正在做的要复杂一些

I read through Binding data in Angular js in string added via $sce.trustAsHtml thoroughly but it's a bit more complex than what I'm doing

使用 $sce.trustAtHtml 没有任何效果.如果我添加 {{paypal}}，我显然会显示 $scope.paypal '' 文本

using $sce.trustAtHtml nothing renders. If I add {{paypal}} I obviously get the $scope.paypal '' text displayed

     <div bind-unsafe-html="paypal">{{paypal}}</div>

推荐答案

最好的方法是创建一个指令，然后在指令中你可以使用 angular.element(基本上是 jQuery lite)来添加指令元素的脚本.以下应该很有效:

Best approach will be create a directive, then from in the directive you can use angular.element (basically jQuery lite) to add the script to the directive element. Following should work out well:

angular.module('myApp')
.directive('paypal', [function(){
    return {
        scope: {
            dollarValue: '@'
        },
        link: function($scope, iElm, iAttrs, controller) {
            var script = '<script async="async" src="' + 
                'https://www.paypalobjects.com/js/external/' + 
                'paypal-button.min.js?merchant=DJOEURGOJ97S"'+ 
                'data-button="buynow"'+
                'data-name="socks"'+
                'data-quantity="1"'+ 
                'data-amount="' + $scope.dollarValue + '"'+
                'data-currency="USD"'+ 
                'data-shipping="0"'+
                'data-tax="0"'+
                'data-callback="https://gamerhoic.com/ipn/data.php"'+
                '></script>';

            var scriptElem = angular.element(script)
            iElm.append(scriptElem)
            scriptElem.on('ready', ...)
        }
    };
}]);

注意这个指令有隔离作用域，它把它的 dollarValue 作用域属性分配给父级的字符串值(所以你可以重用指令)

Notice this directive has isolate scope, and it is assigning it's dollarValue scope property to the string value of the parent's (so you can re-use directive)

然后在您的视图 html 中，使用新的自定义指令作为元素或属性，指定 dollarAmt:

Then in your view html, use the new custom directive as an element or attribute, specifying the dollarAmt:

<paypal DollarAmt="{{dollarAmt}}"></paypal>

或

<div paypal DollarAmt="{{dollarAmt}}"></div>

您应该会看到您的脚本标签被附加到它上面.您还可以替换指令中的包含元素(将 link fn 中的 element 重新分配给您想要的任何内容.)

You should see your script tag get appended to it. You could also replace the containing element in the directive (reassign element in link fn to whatever you want.)

看看这个创建自定义指令的指南，真的很酷

更新

看起来像创建这些脚本标签，使用 document.createElement() 而不是 angular.element (见这里)

Looks like to create these script tags it's more foolproof to use document.createElement() rather than angular.element (see here)

我更改了上面的指令以使用此代码，并且能够看到页面上出现贝宝按钮:

I changed the directive above to use this code and was able to see the paypal button appear on the page:

var scriptElem = angular.element(document.createElement('script'))
scriptElem.attr("src", scriptUrl) // set var appropriately
element.append(scriptElem)

这篇关于渲染<脚本>angularjs 中的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！