将 PayPal Checkout 按钮的样式更改为 Angular.js 组件?
Changing the style of a PayPal Checkout Button as an Angular.js component?
如何设置 PayPal Checkout Button when using it as Angular.js element 指令的 style
选项?
this.paypal = {
// ...
style: {
color: 'black',
shape: 'rect'
}
}
似乎 style
选项不能作为 style
在绑定中传递,因为这已经是一个保留的 HTMLElement
属性?
<paypal-button
client="$ctrl.paypal.client"
commit="true"
env="$ctrl.paypal.env"
style="$ctrl.paypal.style"
on-authorize="$ctrl.paypal.onAuthorize"
on-cancel="$ctrl.paypal.onCancel"
payment="$ctrl.paypal.payment">
</paypal-button>
知道了,你必须使用 ng-attr-style="$ctrl.paypal.style"
它会起作用。
ng-attr-style
允许您计算表达式而不是解释该输入元素的 style
属性的字符串文字。完整的解释可以在标题 "ngAttr for binding to arbitrary attributes" 下找到 here。
请参考 plnkr link 指令中的 paypalbutton 应用 syles 的工作代码
您可以将整个 paypal 变量传递给控制器范围内的指令。
scope: {
paypal: '='
},
然后就可以把变量绑定到模板上了
<test-directive paypal="$ctrl.paypal"></test-directive>
(function() {
var app = angular.module("myApp", ['ui.bootstrap', 'paypal-button']);
app.controller('testCtrl', ['$scope', function($scope) {
var $ctrl = this;
$ctrl.paypal = {
env: 'sandbox',
client: {
sandbox: 'AWi18rxt26-hrueMoPZ0tpGEOJnNT4QkiMQst9pYgaQNAfS1FLFxkxQuiaqRBj1vV5PmgHX_jA_c1ncL',
production: '<insert production client id>'
},
payment: function() {
var env = this.props.env;
var client = this.props.client;
return paypal.rest.payment.create(env, client, {
transactions: [{
amount: {
total: '1.00',
currency: 'USD'
}
}]
});
},
commit: true, // Optional: show a 'Pay Now' button in the checkout flow
onAuthorize: function(data, actions) {
// Optional: display a confirmation page here
return actions.payment.execute().then(function() {
// Show a success page to the buyer
});
},
style: {
color: 'black',
shape: 'rect'
}
};
}]);
app.directive('testDirective', [function () {
return {
restrict: 'E',
template: '<paypal-button env="paypal.env" style="paypal.style" client="paypal.client" payment="paypal.payment" commit="paypal.commit" on-authorize="paypal.onAuthorize"></paypal-button>',
scope: {
paypal: '='
},
link: function (scope, element, attrs, controller) {
}
};
}]);
}());
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.min.js"></script>
<script src="https://www.paypalobjects.com/api/checkout.js" data-version-4></script>
</head>
<body ng-app="myApp">
<div ng-controller="testCtrl as $ctrl">
<test-directive paypal="$ctrl.paypal">
</test-directive>
</div>
</body>
</html>
如何设置 PayPal Checkout Button when using it as Angular.js element 指令的 style
选项?
this.paypal = {
// ...
style: {
color: 'black',
shape: 'rect'
}
}
似乎 style
选项不能作为 style
在绑定中传递,因为这已经是一个保留的 HTMLElement
属性?
<paypal-button
client="$ctrl.paypal.client"
commit="true"
env="$ctrl.paypal.env"
style="$ctrl.paypal.style"
on-authorize="$ctrl.paypal.onAuthorize"
on-cancel="$ctrl.paypal.onCancel"
payment="$ctrl.paypal.payment">
</paypal-button>
知道了,你必须使用 ng-attr-style="$ctrl.paypal.style"
它会起作用。
ng-attr-style
允许您计算表达式而不是解释该输入元素的 style
属性的字符串文字。完整的解释可以在标题 "ngAttr for binding to arbitrary attributes" 下找到 here。
请参考 plnkr link 指令中的 paypalbutton 应用 syles 的工作代码
您可以将整个 paypal 变量传递给控制器范围内的指令。
scope: {
paypal: '='
},
然后就可以把变量绑定到模板上了
<test-directive paypal="$ctrl.paypal"></test-directive>
(function() {
var app = angular.module("myApp", ['ui.bootstrap', 'paypal-button']);
app.controller('testCtrl', ['$scope', function($scope) {
var $ctrl = this;
$ctrl.paypal = {
env: 'sandbox',
client: {
sandbox: 'AWi18rxt26-hrueMoPZ0tpGEOJnNT4QkiMQst9pYgaQNAfS1FLFxkxQuiaqRBj1vV5PmgHX_jA_c1ncL',
production: '<insert production client id>'
},
payment: function() {
var env = this.props.env;
var client = this.props.client;
return paypal.rest.payment.create(env, client, {
transactions: [{
amount: {
total: '1.00',
currency: 'USD'
}
}]
});
},
commit: true, // Optional: show a 'Pay Now' button in the checkout flow
onAuthorize: function(data, actions) {
// Optional: display a confirmation page here
return actions.payment.execute().then(function() {
// Show a success page to the buyer
});
},
style: {
color: 'black',
shape: 'rect'
}
};
}]);
app.directive('testDirective', [function () {
return {
restrict: 'E',
template: '<paypal-button env="paypal.env" style="paypal.style" client="paypal.client" payment="paypal.payment" commit="paypal.commit" on-authorize="paypal.onAuthorize"></paypal-button>',
scope: {
paypal: '='
},
link: function (scope, element, attrs, controller) {
}
};
}]);
}());
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.min.js"></script>
<script src="https://www.paypalobjects.com/api/checkout.js" data-version-4></script>
</head>
<body ng-app="myApp">
<div ng-controller="testCtrl as $ctrl">
<test-directive paypal="$ctrl.paypal">
</test-directive>
</div>
</body>
</html>