render <script> tag in angularjs

user2320607

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.

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

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

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

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

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

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

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)

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

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

or

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

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

Check out this guide to creating custom directives, it's really cool

UPDATE

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)

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Using Passed Mongodb retrieved data by express through res.render('jadeview', mail:mongodbretriveddata) in script. tag in Jade view?

From Dev

How to dynamically not render a script tag?

From Dev

Javascript inside script tag in an Angularjs template is not executed

From Dev

AngularJs Render div onclick

From Dev

@Script.Render Not Working For AngularJS

From Dev

Datatables : How to render <a> html tag?

From Dev

AngularJS Render HTML in textarea

From Dev

Angularjs. Send variable inside html template in tag <script>

From Dev

How can I use input textbox value in the ng-template script tag of same angularjs page

From Dev

How to render a HTML tag from json value using angularJs

From Dev

AngularJS script tag JSON-LD

From Dev

Json-ld script tag for angularjs2

From Dev

React | render html tag in jsx

From Dev

Trying to dynamically render JSX tag

From Dev

Using Passed Mongodb retrieved data by express through res.render('jadeview', mail:mongodbretriveddata) in script. tag in Jade view?

From Dev

How can I output a script tag that is stored as a string in my scope to an AngularJS template?

From Dev

Javascript inside script tag in an Angularjs template is not executed

From Dev

AngularJs Render div onclick

From Dev

In an JavaScript If/else statement, how can I render a script tag based on the condition?

From Dev

How to use AngularJS in script tag?

From Dev

Datatables : How to render <a> html tag?

From Dev

Calling AngularJS inside <script> tag

From Dev

Angularjs. Send variable inside html template in tag <script>

From Dev

AngularJS: Access controller properties inside script tag in the view

From Dev

How can I use input textbox value in the ng-template script tag of same angularjs page

From Dev

AngularJS: Script tag not working in ng-include

From Dev

angularJS {{variable}} can't be displayed in script tag

From Dev

Pass a value from response.render inside the script tag

From Dev

Django Deep Linking render with #tag

Related Related

  1. 1

    Using Passed Mongodb retrieved data by express through res.render('jadeview', mail:mongodbretriveddata) in script. tag in Jade view?

  2. 2

    How to dynamically not render a script tag?

  3. 3

    Javascript inside script tag in an Angularjs template is not executed

  4. 4

    AngularJs Render div onclick

  5. 5

    @Script.Render Not Working For AngularJS

  6. 6

    Datatables : How to render <a> html tag?

  7. 7

    AngularJS Render HTML in textarea

  8. 8

    Angularjs. Send variable inside html template in tag <script>

  9. 9

    How can I use input textbox value in the ng-template script tag of same angularjs page

  10. 10

    How to render a HTML tag from json value using angularJs

  11. 11

    AngularJS script tag JSON-LD

  12. 12

    Json-ld script tag for angularjs2

  13. 13

    React | render html tag in jsx

  14. 14

    Trying to dynamically render JSX tag

  15. 15

    Using Passed Mongodb retrieved data by express through res.render('jadeview', mail:mongodbretriveddata) in script. tag in Jade view?

  16. 16

    How can I output a script tag that is stored as a string in my scope to an AngularJS template?

  17. 17

    Javascript inside script tag in an Angularjs template is not executed

  18. 18

    AngularJs Render div onclick

  19. 19

    In an JavaScript If/else statement, how can I render a script tag based on the condition?

  20. 20

    How to use AngularJS in script tag?

  21. 21

    Datatables : How to render <a> html tag?

  22. 22

    Calling AngularJS inside <script> tag

  23. 23

    Angularjs. Send variable inside html template in tag <script>

  24. 24

    AngularJS: Access controller properties inside script tag in the view

  25. 25

    How can I use input textbox value in the ng-template script tag of same angularjs page

  26. 26

    AngularJS: Script tag not working in ng-include

  27. 27

    angularJS {{variable}} can't be displayed in script tag

  28. 28

    Pass a value from response.render inside the script tag

  29. 29

    Django Deep Linking render with #tag

HotTag

Archive