使用Paypal REST API和AngularJS复制的Paypal按钮
[英]Duplicated Paypal buttons with Paypal REST API and AngularJS
问题描述
I'm building an Single Page App where the paypal button is generated on ng-click from a button (Add products). 
我正在构建一个单页应用程序，其中在通过ng-click单击一个按钮（添加产品）时会生成贝宝按钮。
The problem I'm facing, is that if the user clicks this button several times, the app will generate several buttons one after the other. 我面临的问题是，如果用户多次单击此按钮，则该应用程序将一个接一个地生成多个按钮。
This can very well happen as the user might click the button, but then go back and add an extra product, before finish the purchase. 这很可能会发生，因为用户可能会单击按钮，然后在完成购买之前返回并添加其他产品。
How could I manage to remove all existing buttons before adding the new one? 在添加新按钮之前，我如何设法删除所有现有按钮？
The function looks like this: 该函数如下所示：
$scope.formulari = function(){
paypal.Button.render({
env: 'production', // Or 'sandbox'
locale: 'es_ES',
style: {
label: 'paypal',
...
And after a few clicks, my initial HTML button <a id="paypal-button"></a> looks like this: 然后单击几下，我的初始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>
1 个解决方案
解决方案1
0 2018-03-07 11:11:51
Generating a button on click might not be the way you want to go with an AngularJs structure. 在AngularJs结构中，单击可能不会生成单击按钮。 Editing your DOM structure is more a jQuery thing and in general you don't want to mix the two (Some explanations of why: 1 , 2 ). 编辑DOM结构较为jQuery的事情，一般你不想将两者搅和（其中一些原因说明： 1 ， 2 ）。
An Angular way to pick this up would be the following (Explanation beneath snippet): 采取以下方式的Angular方法如下（代码段下方的说明）：
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>
With this method the button always exists, it just isn't visible until the requirements within the ng-show are met. 使用此方法，按钮始终存在，直到满足ng-show中的要求才可见。 In the example, the requirement is that there are items in the cart. 在此示例中，要求是购物车中有物品。 You will notice that once the requirements are no longer met the button will disappear again. 您会注意到，一旦不再满足要求，该按钮将再次消失。
An opposite of ng-show is ng-hide which can be used in the same way: ng-show的反义词是ng-hide ，可以用相同的方式使用：
ng-hide="cart.length == 0" or ng-hide="cart.length < 1 ng-hide="cart.length == 0"或ng-hide="cart.length < 1
If you're dead set on using your current method, you can check out this answer here , although it is not Angular. 如果您不愿意使用当前方法，尽管不是Angular，也可以在此处查看此答案。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.