Javascript 渲染<；脚本>；用angularjs标记

我正在尝试将paypal的pay按钮添加到我的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>';

$scope.paypal=''；

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

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

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

$sce.trustAsHtml（“”）；

我通读了一遍，但比我现在做的要复杂一点

使用$sce.trustAtHtml不会渲染任何内容。如果添加{{paypal}}，显然会显示$scope.paypal''文本

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

{{paypal}

最好的方法是创建一个指令，然后从指令中可以使用

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', ...)
        }
    };
}]);

---

我见过很多人在搜索paypal和angularjs选项。。。下面是我所做的工作，使用上面的帮助中的代码来实现这一切

从控制器我广播贝宝金额

$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)

                    }
                );

    }
};
}]);

---

我创建了一个模块来解决这个问题。 请看:

非常容易使用：

使用bower进行安装：

bower安装在page-js-render-angular1

只需将js-render.js包含到页面中即可

将“ngLoadScript”添加到应用程序依赖项中。例如，angular.模块（'YOUR_APP_NAME'，['ngLoadScript']）

将其用作：

<script type="text/javascript-inpage"> 
  /**Your Script here**/ 
</script>

/**您的脚本在此**/

您说您尝试了

$sce.trustAsHtml（）

，但没有提到它做了什么或没有做什么。看起来这应该行得通，那么你真正的问题是什么？天哪，如果stackoverflow允许在比特币中倾倒，那就太好了。。。它仍然没有呈现，但到目前为止，这是我从数小时的搜索中得到的最好答案。这是一个很好的答案，但是当dollarValue来自指令范围时，我会做+1，并将其作为独立指令，以便可以重用。很好的捕获，我只是剪切和粘贴，我猜您可能还需要更多来自父范围的数据属性，如果有人不能让它工作的话。我在读angularjs指令书，喜欢棱角分明但有很多工作要做。我现在尝试这种方法是因为在这两天的战斗之前，我无法将dollarValue从父级传递到指令

<script type="text/javascript-inpage"> 
  /**Your Script here**/ 
</script>