Question

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

$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>';

如果这很容易的话会很棒。

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

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

我彻底阅读了Binding data in Angular js in string added via $sce.trustAsHtml，但它比我正在做的事情复杂得多

使用$ sce.trustAtHtml没有任何渲染。如果我添加{{paypal}}，我显然会得到$ scope.paypal＆＃39;＆＃39;文字显示

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

Answer 1

最好的方法是创建一个指令，然后在指令中你可以使用angular.element（基本上是jQuery lite）将脚本添加到指令元素。以下应该很好：

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范围属性分配给父级的字符串值（因此您可以重复使用指令）

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

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

或

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

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

查看此guide to creating custom directives，这真的很酷

更新

看起来要创建这些脚本标记，使用document.createElement()而不是angular.element（see here）

更加万无一失

我更改了上面的指令以使用此代码，并且能够看到页面上显示paypal按钮：

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

Answer 2

我看到很多人都在寻找paypal和angularjs选项......这就是我所做的一切，使用我上面提供的非常棒的帮助来完成所有工作

来自控制器的

我广播了paypal金额

$scope.$broadcast("paypalAmount", $scope.dollarValue)

使用提供的指令我收听广播并更新付款按钮的金额

.directive('paypal', [function(){
return {
    scope: {},
    link: function($scope, element, iAttrs) {

                $scope.$on(
                    "paypalAmount",
                    function handlePingEvent( event, dollarValue ) {

                        var scriptElem = angular.element(document.createElement('script'))
                        scriptElem.attr({src:'https://www.paypalobjects.com/js/external/paypal-button.min.js?merchant=YOUR-PAYPAL-EMAIL','data-button':'buynow','data-name':'Arcade Tokens','data-amount':dollarValue,'data-currency':'USD','data-callback':'https://gamerholic.com/ipn/data.php' }) // set var appropriately
                        element.append(scriptElem)

                    }
                );

    }
};
}]);

Answer 3

我已经创建了一个模块来克服这个问题。请查看：https://github.com/umair321/Inpage-js-render-for-angularjs

非常容易使用：

使用bower安装它：int

只需在页面中包含js-render.js

即可

添加＆＃39; ngLoadScript＆＃39;到你的应用程序依赖项。例如。 angular.module（＆＃39; YOUR_APP_NAME＆＃39;，[＆＃39; ngLoadScript＆＃39;]）

用作：

bower install inpage-js-render-angular1

在angularjs </script>中渲染<script>标记

3 个答案: