传递$价值贝宝指令angularjs [英] Pass $ value to paypal directive angularjs
本文介绍了传递$价值贝宝指令angularjs的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望使用PayPal和angularJS，我碰到一个真棒angularjs指令来到贝宝
＆LT;贝宝按钮业务=cs@me.com语言 - code =EN_UScurrency- code =USD
项目名称=袜子金额={{dollarValue}}NG模型=paypalButton＆GT;＆LT; /贝宝按钮＆GT;
我在这里的问题是按钮的数量通过范围传递
假设用户想要10袜子，每个袜子是$ 5，用户输入10，一后端脚本乘以10x5和作为应在量去数返回50 =
如何我通过$ scope.amount提交贝宝表格上的金额是多少？
我试着看能不能传递量的贝宝指令，但我无法将它传递给指令。
angular.module（'WCtrl'，[]）
.controller('WController',['$scope','$q','$http','$location','$interval','$firebase','$timeout','$stateParams','$routeParams',功能（$范围，$ Q $ HTTP，$位置，$区间，$火力点，$超时，$ stateParams，$ routeParams）{
$ http.defaults.headers.post [的Content-Type] =应用/的X WWW的形式urlen codeD;/$scope.calculate =功能（）{
//console.log(\"reached）
$ scope.calculate = $ scope.calc（）;
$ scope.calculate = $ scope.calculate.then（功能（金额）{ $ http.post（公共/视图/ calculate.php？A ='+量，$。参数（$ scope.FormData））
.success（功能（响应）{
如果（！response.success）{ $（＃消息）。ATTR（类，警戒警报的危险文本中心）
$ scope.message = response.message
}其他{
$ scope.amount = response.amount }
}） }）
}
}]）.directive（'paypalButton'，函数（）{
返回{
限制：'E'，
范围： {
金额：'='
}，
链接：功能（范围，元素，ATTRS）{
element.text（scope.amount）;
}，
编译：功能（元素，ATTRS）{
VAR语言codeS = [//贝宝允许语言codeS
EN_US'，
es_ES'，
在fr_FR，
it_IT，
'de_DE'对应
];
VAR货币codeS = [//贝宝允许货币codeS
澳元，
CAD，
克朗，
DKK'，
'欧元'，
港币，
福林，
ILS，
'日元'，
MXN，
NOK，
NZD'，
PHP，
PLN，
'英镑'，
'擦'，
新元，
SEK，
瑞士法郎，
'TWD'，
泰铢，
'美元'
];
VAR buttonSizes = [//允许的PayPal按钮的大小
'SM'，//小
'LG'//大
];
变量名称= this.name;
函数ERR（原因）{
element.replaceWith（'＆LT;跨度风格=背景色：红色;颜色：黑色;填充：.5em;＆GT;'+名字+：+理由+'＆LT; / SPAN＆GT;'）;
的console.log（element.context）;
}
VAR行动= attrs.action || https://www.paypal.com/us/cgi-bin/webscr';
VAR商业= attrs.business;
VAR语言code = attrs.language code || EN_US';
VAR货币code = attrs.currency code || '美元';
VAR ITEMNAME = attrs.itemName;
VAR金额= parseFloat（attrs.amount）;
VAR buttonSize = attrs.buttonSize || 'SM';
VAR imgAlt = attrs.imgAlt || 让支付使用PayPal - 它\\的快速，自由和安全;！
如果（业务！）{返回ERR（'业务不指定！'）; }
如果（未指定项目名称！'）（ITEMNAME！）{返回ERR; }
如果{返回ERR（量！）（'未指定数额！'）; }
如果（isNaN（量））{返回ERR（'量不是一个数字！'）; }
如果（语言codes.indexOf（语言code）小于0）（'！不可预见的语言code'）{返回ERR; }
如果（货币codes.indexOf（货币code）小于0）（'！不可预见的货币code'）{返回ERR; }
如果（buttonSizes.indexOf（buttonSize）小于0）（'！不可预见的按钮大小'）{返回ERR; }
VAR imgSrc ='http://www.paypalobjects.com/'+语言code +'/ I / BTN / btn_buynow_'+ buttonSize +'.gif注意';
VAR模板=
'＆LT;表格名称=_ xclick行动=+动作+'的方法=后＆GT;' +
'＆LT;输入类型=隐藏的名字=CMD值=_ xclick＆GT;' +
'＆LT;输入类型=隐藏的名字=商业价值=+企业+'＆GT;' +
'＆LT;输入类型=隐藏的名字=currency_ code值='+货币code +'＆GT;' +
'＆LT;输入类型=隐藏的名字=ITEM_NAMEVALUE =+ ITEMNAME +'＆GT;' +
'＆LT;输入类型=隐藏的名字=数量值=+量+'＆GT;' +
'＆LT;输入类型=形象SRC =+ imgSrc +'BORDER =0NAME =提交ALT =+ imgAlt +'＆GT;' +
'＆LT; /形式为GT;';
//element.replaceWith(template）;
element.append（模板）;
}
};
}）;
解决方案
我看到了很多人寻找一个PayPal和angularjs选项...这是我做得到它的所有工作使用code从我来到这里帮助渲染＆LT;脚本＆GT;在angularjs
标签从控制器我播贝宝金额
$范围。$广播（paypalAmount，$ scope.dollarValue）
使用所提供的指令，我听的广播和更新的支付按钮金额
.directive（'贝宝'，[功能（）{
返回{
范围： {}，
链接：功能（$范围，元素，iAttrs）{ $范围。$上（
paypalAmount
功能handlePingEvent（事件，dollarValue）{ VAR scriptElem = angular.element（使用document.createElement（'脚本'））
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' }）//设置适当变种
element.append（scriptElem） }
）; }
};
}]）;
I'm hoping to use paypal and angularJS, I came across an awesome angularjs directive for paypal
<paypal-button business="cs@me.com" language-code="en_US" currency-code="USD"
item-name="socks" amount="{{dollarValue}}" ng-model="paypalButton"></paypal-button>
The problem I'm having here is the amount for the button is passed via scope
Say the user wants 10 socks, each sock is $5, the user enters "10", a back end script multiplies 10x5 and returns 50 as the number that should go in the amount=""
how to I pass $scope.amount to be the amount submitted on the paypal form?
I've tried to see if I can pass amount to the paypal directive, but I'm having trouble passing it to the directive.
angular.module('WCtrl', [])
.controller('WController',['$scope','$q','$http','$location','$interval','$firebase','$timeout','$stateParams','$routeParams', function($scope,$q,$http,$location,$interval,$firebase,$timeout,$stateParams,$routeParams) {
$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
/$scope.calculate = function(){
//console.log("reached")
$scope.calculate = $scope.calc();
$scope.calculate = $scope.calculate.then(function(amount){
$http.post('public/views/calculate.php?a='+amount,$.param($scope.FormData))
.success(function(response){
if(!response.success){
$("#message").attr('class','alert alert-danger text-center')
$scope.message = response.message
}else{
$scope.amount = response.amount
}
})
})
}
}])
.directive('paypalButton',function() {
return {
restrict: 'E',
scope: {
amount:'='
},
link: function(scope, element, attrs){
element.text(scope.amount);
},
compile: function(element, attrs) {
var languageCodes = [ // PayPal allowed language codes
'en_US',
'es_ES',
'fr_FR',
'it_IT',
'de_DE'
];
var currencyCodes = [ // PayPal allowed currency codes
'AUD',
'CAD',
'CZK',
'DKK',
'EUR',
'HKD',
'HUF',
'ILS',
'JPY',
'MXN',
'NOK',
'NZD',
'PHP',
'PLN',
'GBP',
'RUB',
'SGD',
'SEK',
'CHF',
'TWD',
'THB',
'USD'
];
var buttonSizes = [ // PayPal allowed button sizes
'SM', // small
'LG' // large
];
var name = this.name;
function err(reason) {
element.replaceWith('<span style="background-color:red; color:black; padding:.5em;">' + name + ': ' + reason + '</span>');
console.log(element.context);
}
var action = attrs.action || 'https://www.paypal.com/us/cgi-bin/webscr';
var business = attrs.business;
var languageCode = attrs.languageCode || 'en_US';
var currencyCode = attrs.currencyCode || 'USD';
var itemName = attrs.itemName;
var amount = parseFloat(attrs.amount);
var buttonSize = attrs.buttonSize || 'SM';
var imgAlt = attrs.imgAlt || 'Make payments with PayPal - it\'s fast, free and secure!';
if (!business) { return err('business not specified!'); }
if (!itemName) { return err('item name not specified!'); }
if (!amount) { return err('amount not specified!'); }
if (isNaN(amount)) { return err('amount is not a number!'); }
if (languageCodes.indexOf(languageCode) < 0) { return err('unforeseen language code!'); }
if (currencyCodes.indexOf(currencyCode) < 0) { return err('unforeseen currency code!'); }
if (buttonSizes.indexOf(buttonSize) < 0) { return err('unforeseen button size!'); }
var imgSrc = 'http://www.paypalobjects.com/' + languageCode + '/i/btn/btn_buynow_' + buttonSize + '.gif';
var template =
'<form name="_xclick" action="' + action + '" method="post">' +
'<input type="hidden" name="cmd" value="_xclick">' +
'<input type="hidden" name="business" value="' + business + '">' +
'<input type="hidden" name="currency_code" value="' + currencyCode + '">' +
'<input type="hidden" name="item_name" value="' + itemName + '">' +
'<input type="hidden" name="amount" value="' + amount + '">' +
'<input type="image" src="' + imgSrc + '" border="0" name="submit" alt="' + imgAlt + '">' +
'</form>';
//element.replaceWith(template);
element.append(template);
}
};
});
解决方案
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 help I got here render <script> tag in angularjs
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.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)
}
);
}
};
}]);
这篇关于传递$价值贝宝指令angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
