使用 Paypal REST API 和 AngularJS 复制的 Paypal 按钮答案

【问题标题】：Duplicated Paypal buttons with Paypal REST API and AngularJS使用 Paypal REST API 和 AngularJS 复制的 Paypal 按钮
【发布时间】：2018-03-06 15:37:07
【问题描述】：

我正在构建一个单页应用程序，其中 paypal 按钮是通过 ng-click 从按钮（添加产品）生成的。

我面临的问题是，如果用户多次点击这个按钮，应用会一个接一个地生成几个按钮。

这很可能发生，因为用户可能会单击按钮，但在完成购买之前返回并添加额外的产品。

如何在添加新按钮之前删除所有现有按钮？

函数如下所示：

$scope.formulari = function(){
  paypal.Button.render({

      env: 'production', // Or 'sandbox'
      locale: 'es_ES',

      style: {
          label: 'paypal',
      ...

点击几下后，我的初始 HTML 按钮 <a id="paypal-button"></a> 如下所示：

<a id="paypal-button">
    <div id="xcomponent-paypal-button-6d3dcbc0c4" class="paypal-button paypal-button-context-iframe paypal-button-label-paypal paypal-button-size-large paypal-button-layout-horizontal" style=""></div>
    <div id="xcomponent-paypal-button-46823018c3" class="paypal-button paypal-button-context-iframe paypal-button-label-paypal paypal-button-size-large paypal-button-layout-horizontal" style=""></div>
    <div id="xcomponent-paypal-button-41aad29e14" class="paypal-button paypal-button-context-iframe paypal-button-label-paypal paypal-button-size-large paypal-button-layout-horizontal" style=""></div>
    <div id="xcomponent-paypal-button-48d3247535" class="paypal-button paypal-button-context-iframe paypal-button-label-paypal paypal-button-size-large paypal-button-layout-horizontal" style=""></div>
</a>

【问题讨论】：

我认为您可能需要重新检查您关于在每次点击后“创建”一个新按钮的基本假设。也许你想要实现一个“隐藏”和“显示”范式......

标签： angularjs paypal paypal-rest-sdk

【解决方案1】：

在单击时生成按钮可能不是您希望使用 AngularJs 结构的方式。编辑你的 DOM 结构更像是一个 jQuery 的事情，一般来说你不想混合两者（一些解释为什么：1，2）。

一个 Angular 的方式来获取它是下面的（在 sn-p 下的解释）：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.articles = ['PC', 'Playstation', 'Xbox'];
  $scope.cart = [];

  $scope.addArticleToCart = function(article) {
    $scope.cart.push(article);
  }

  $scope.clearCart = function() {
    $scope.cart = [];
  }

  $scope.doPaypalThings = function() {
    //REST API stuff
  }
});

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="article in articles">
      <button ng-click="addArticleToCart(article)">
        {{article}}
      </button>
    </div>

    <br>

    <div ng-show="cart.length > 0">
      <button id="paypal-button" ng-click="doPaypalThings()">
        Paypal
      </button>
    </div>

    <br>

    <div>
      In cart:
    </div>
    <div ng-repeat="item in cart">
      {{item}}
    </div>

    <br>

    <div>
      <button ng-click="clearCart()">
        Clear cart
      </button>
    </div>
  </div>
</body>

</html>

使用此方法，按钮始终存在，只是在满足ng-show 中的要求之前它是不可见的。在示例中，要求是购物车中有商品。您会注意到，一旦不再满足要求，该按钮将再次消失。

ng-show 的反义词是ng-hide，可以以同样的方式使用：

ng-hide="cart.length == 0" 或 ng-hide="cart.length < 1

如果您对使用当前方法一无所知，您可以查看此答案here，尽管它不是 Angular。

【讨论】：