L'extraction de bande ne fonctionne pas en mode angulaire 1.x

J'utilise le paiement par bande pour traiter les paiements. J'ai suivi ce projet GITHUB et ce blog.L'extraction de bande ne fonctionne pas en mode angulaire 1.x

Mon projet a des vues imbriquées et utilise également des routeurs.

Ma structure de projet ressemble

src 
    app 
    views 
    controllers 
    directives 
    index.html 
    app.js

Le app.js est où le module angulaire est chargé manuellement et a les routeurs.

app.js

var myApp = angular.module('myApp', ['ui.router', 'formData']); 
myApp.config(function($stateProvider, $urlRouterProvider, $httpProvider) { 
    // routers 
}

Le index.html est l'endroit où les scripts angulaires et bandes sont inclus

index.html

<head lang="en"> 
    <script type="text/javascript" src="https://js.stripe.com/v2/"></script> 
    <Script src="resources/angular.min.js"></Script> 
    <Script src="resources/angular-ui-router.min.js"></Script> 
    <script src="app.js"></script> 
    <script src="directives/formData/formData.js"></script> 
    <script type="text/javascript" 
     src="resources/angular-payments.js"> 
    </script> 
    <script> 
     Stripe.setPublishableKey('key') 
    </script> 
</head> 
<div> 
    <div ui-view> 
    </div> 
</div>

N OW la directive formData est là où je suis en train d'inclure le paiement de la bande

formData.js

var formData = angular.module('formData',['angularPayments']); 
formData.directive('formData',function(){ 
    return { 
     restrict: 'EA', 
     scope: {}, 
     replace: true, 
     link: function($scope, element, attributes){ 

     }, 
     controller: function($scope,$attrs,$http, $state){ 
      //This is the callback for strip from the links above as followed 
      $scope.stripeCallback = function (code, result) { 
       console.log("inside cc callbakc"); 
       if (result.error) { 
        console.log("credit card error"); 
        window.alert('it failed! error: ' + result.error.message); 
       } else { 
        console.log(result); 
        console.log("credit card succes "+result.id); 
        window.alert('success! token: ' + result.id); 
       } 
      }; 

     }, 
     templateUrl: 'directives/formData/formData.tpl.html' 
    } 
});

formData.tpl.html a un autre routeur ui

formData.tpl .html

<form id="signup-form" ng-submit="processForm()"> 
    <!-- our nested state views will be injected here --> 
    <div ui-view></div 
</form>

et une de la page html routeur est ui la page de paiement avec ce code

<form stripe-form="stripeCallback" name="checkoutForm">> 
    <input ng-model="number" placeholder="Card Number" 
      payments-format="card" payments-validate="card" name="card" /> 
    <input ng-model="expiry" placeholder="Expiration" 
      payments-format="expiry" payments-validate="expiry"     
      name="expiry" /> 
    <input ng-model="cvc" placeholder="CVC" payments-format="cvc" payments-validate="cvc" name="cvc" /> 
    <button type="submit">Submit</button> 
</form>

je reçois le bon fonctionnement mais imprime des validations rien dans la console quand je frappe soumettre. Je suppose que le js n'est pas viré. Faites-moi savoir si vous avez besoin de plus d'informations.

Source

2017-07-31 ksernow

Cela rendra les formes imbriquées, ce qui est invalide html. La plupart des navigateurs «pardonnent» silencieusement en traitant la forme interne comme un élément non-forme. Si vous déplacez le formulaire de sortie du formulaire d'inscription, cela devrait vous mettre sur la bonne voie.

Source

2017-07-31 03:24:31 PippLogic

Oui, si je l'ai en dehors du formulaire d'inscription cela fonctionne. Mais j'ai vraiment besoin de ça à l'intérieur – ksernow

L'extraction de bande ne fonctionne pas en mode angulaire 1.x

Répondre

Questions connexes