AngularJS: invio modulo nel modo normale

Sto implementando AngularJS su un'applicazione Web esistente che richiede un POST HTTP comune come si farebbe senza AngularJS.AngularJS: invio modulo nel modo normale

Questo sembra essere più difficile di quanto mi aspettassi. L'URL della pagina è generato dinamicamente e non può essere echeggiato usando PHP. Ho provato a modificare l'azione del modulo usando jQuery ma non sembra funzionare.

È davvero impossibile presentare un modulo nel modo normale? Questo è quello che voglio dire con una forma normale:

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
    <form method="post"> 
     <input type="text" name="txt"> 
     <input type="submit" name="submit"> 
    </form> 
</body> 
</html>

E questo è lo stesso modulo con AngularJS:

<!DOCTYPE html> 
<html ng-app> 
<head> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
</head> 
<body> 
    <form method="post"> 
     <input type="text" name="txt"> 
     <input type="submit" name="submit"> 
    </form> 
</body> 
</html>

Il primo modulo esegue un post forma regolare, la seconda forma non lo fa. Secondo http://docs.angularjs.org/api/ng.directive:form questo è di progettazione e posso fornire il parametro "azione" nel modulo. Lasciarlo vuoto non funziona e modificarlo usando jQuery non sembra funzionare neanche.

fonte

2013-08-08 henk

Puoi dare codice di esempio per favore? La domanda non è chiara per me. – tschiela

Mi dispiace, ho aggiunto alcune informazioni e un po 'di più sulla documentazione. Spero che qualcuno possa darmi una mano .. Non riesco a immaginare che sia impossibile. – henk

Perché non riesci a echo l'URL della pagina? – noj

-4

Non puoi semplicemente usare

<form ng-submit="submit()" ng-controller="Ctrl">

E aggiungere il metodo POST al controller

fonte

2013-08-08 10:05:06 seridis

Non sono sicuro di cosa intendi. L'invio del modulo utilizzando AJAX non è quello che sto cercando, sto cercando un POST HTTP comune e comune. – henk

Potete provare ad aggiungere un attributo action vuoto come

<form action="" method="POST">

Secondo HTML Form Submission Algorithm, punto 8 è

Se action è la stringa vuota, lasciare che l'azione sia l'indirizzo del documento del modulo.

Questo significa che dovrebbe prendere l'url costruito in modo dinamico e post ad esso e AngularJS consentirà anche che poiché non v'è un attributo action

fonte

2013-08-08 10:34:57 rajasaur

Bene, come ho detto, non sembra funzionare. Immagino che AngularJS controlli per vedere se non è vuoto .. – henk

l'ho trovato un po '... Si scopre che modifica l'azione con jQuery durante il caricamento della struttura DOM funziona, ma modificandolo dopo che il DOM è stato caricato non funziona ..

Quindi questo funziona:

<!DOCTYPE html> 
<html ng-app> 
<head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3.2/jquery.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
</head> 
<body> 
    <form method="post" ng-submit="submit()" action> 
     <input type="text" name="txt"> 
     <input type="submit" name="submit"> 
    </form> 
</body> 
</html> 
<script type="text/javascript"> 
    $("form").get(0).setAttribute("action", "test.html"); 
</script>

Ma questo doesn 't:

<!DOCTYPE html> 
<html ng-app> 
<head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3.2/jquery.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
</head> 
<body> 
    <form method="post" ng-submit="submit()" action> 
     <input type="text" name="txt"> 
     <input type="submit" name="submit"> 
    </form> 
</body> 
</html> 
<script type="text/javascript"> 
    $(function() { 
     $("form").get(0).setAttribute("action", "test.html"); 
    }); 
</script>

Sembra un orribile hack, ma credo che devo conviverci. A meno che qualcuno non riesca a trovare una soluzione migliore ..

fonte

2013-08-08 11:31:34 henk

Ho riscontrato lo stesso problema. Finché AngularJS trova un attributo vuoto (o mancante) action, impedirà a qualsiasi pulsante/input di invio di inviare effettivamente il modulo.

Sono riuscito a risolvere il problema aggiungendo semplicemente l'attributo action="#".

È solo una soluzione, ci sarà quel brutto # alla fine dell'URL POST, ma funziona. Il vantaggio è che non è necessario codificare manualmente l'URL POST (che potrebbe essere generato dinamicamente) nel codice HTML.

fonte

2013-09-30 17:23:52

faccio di solito:

<form action=".">

fonte

2014-01-25 03:30:41 dshap

AngularJS: invio modulo nel modo normale

risposta

Problemi correlati