代码之家 › 专栏 › 技术社区 › jshbrntt

将PayPal结账按钮的样式更改为角度。js组件?

paypal-buttons paypal angularjs

jshbrntt · 技术社区 · 7 年前

如何设置 style 的选项 PayPal Checkout 将其用作 Angular.js element 指令?

this.paypal = {
  // ...
  style: {
    color: 'black',
    shape: 'rect'
  }
}

看起来 风格 选项不能作为在绑定中传递 风格 因为这已经是一个保留 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>

2 回复 | 直到 7 年前

M. Irvin Joshua Barnett 7 年前

明白了,你必须使用 ng-attr-style="$ctrl.paypal.style" 它会起作用的。

ng-attr-style 允许您计算表达式,而不是为 style 该输入元素的属性。可以找到完整的解释 here 标题“用于绑定到任意属性的ngAttr”下。

Nishanth 7 年前

请参考 plnkr link 用于在指令内部的paypalbutton上应用syles的工作代码

您可以将整个paypal变量传递给controller范围内的指令。

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>