I'm trying to add paypal's pay button to my angularjs app,
$scope.paypal ='<script async="async" src=".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=".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 plex 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>
I'm trying to add paypal's pay button to my angularjs app,
$scope.paypal ='<script async="async" src="https://www.paypalobjects./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./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 plex 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>
Share
Improve this question
edited May 23, 2017 at 12:24
CommunityBot
11 silver badge
asked Feb 17, 2015 at 4:29
user2320607user2320607
4251 gold badge9 silver badges19 bronze badges
1
-
you say you tried
$sce.trustAsHtml()
, but you don't mention what it did or didn't do. looks like this should work, so what is your actual question? – Claies Commented Feb 17, 2015 at 4:38
3 Answers
Reset to default 4Best 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./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./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)
I'm seen a lot of folks searching for a paypal and angularjs option... here's what I did to get it all working using the code from the awesome help I got above
from the controller I broadcast the paypal amount
$scope.$broadcast("paypalAmount", $scope.dollarValue)
using the provided directive I listen for the broadcast and update the amount for the payment button
.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./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./ipn/data.php' }) // set var appropriately
element.append(scriptElem)
}
);
}
};
}]);
I have created a module to overe this problem. Please take a look at: https://github./umair321/Inpage-js-render-for-angularjs
Very much easy to use:
Install it using bower: bower install inpage-js-render-angular1
Just include js-render.js to your page
Add 'ngLoadScript' to your app dependencies. E.g. angular.module('YOUR_APP_NAME', ['ngLoadScript'])
Used it as:
<script type="text/javascript-inpage">
/**Your Script here**/
</script>