2014-02-17 15 views
20

Meine Ansicht arbeiten:ng vorlegen nicht in AngularJS

<div class="modal" tabindex="-1" role="dialog" ng-controller="LocationController"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" ng-click="$hide()">&times;</button> 
     <h4 class="modal-title"> 
      Add a Location 
     </h4> 
     </div> 
     <div class="modal-body"> 
     <form class="form-horizontal" role="form" ng-submit="createLocation()"> 
      <div class="form-group"> 
      <label class="col-sm-2 control-label">Name</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" placeholder="Warehouse A, Row 15, Shelf BC1, etc" ng-model="name"> 
      </div> 
      </div> 

      <div class="form-group"> 
      <label class="col-sm-2 control-label">Type</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" placeholder="warehouse, row, shelf, etc" ng-model="type"> 
      </div> 
      </div> 

     </form> 
     </div> 
     <div class="modal-footer"> 
     <button type="submit" class="btn btn-primary">Save</button> 
     <button type="button" class="btn btn-danger" ng-click="$hide()">Cancel</button> 
     </div> 
    </div> 
    </div> 
</div> 

Mein Controller:

angular.module('mean').controller('LocationController', ['$scope', '$location', '$rootScope', 'LocationService', '$modal', '$routeParams', function ($scope, $location, $rootScope, LocationService, $modal, $routeParams) { 

    $scope.createLocation = function() { 
alert('afds'); 
    LocationService.create(this).then(function(response) { 
     console.log(response); 
    }); 
    } 

}]); 

Doch wenn ich spare klicken, ich die Warnung nicht erhalten. Ich bin mir nicht sicher, was dort vor sich geht.

+13

Versuchen Sie, die Schaltfläche "Speichern" innerhalb der '

' –

+0

Wort kommentieren, dass ein weiterer möglicher Grund, dass eine ng-Submit-Handler-Funktion nicht aufgerufen wird, ist, dass die Handler-Funktion tatsächlich in der falschen Controller ist. Wenn es keine ng-submit-Handler-Funktion mit diesem Namen im aktuellen Controller gibt, dann wird der ng-submit einfach im Hintergrund fehlschlagen. – jarmod

Antwort

36

Dank Matt Way 's comment - stellt sich heraus, meine Speichern - Taste war außerhalb meiner Form. Feste

+2

Beantwortet von OP mit Link zu selbst zu kommentieren. Das muss die amüsanteste SO-Antwort sein, die ich bisher gesehen habe. Außerdem hat es mein Problem gelöst! –

+8

Blegh, ich habe das gleiche Problem (die Funktion wird nicht aufgerufen, wenn Formular Absenden Button geklickt) und meine Absenden-Taste ist definitiv in meinem Formular. – robru

+1

Wenn der Knopf innerhalb des Formulars ist und immer noch ng-submit nicht funktioniert, dann geben Sie Ihre Schaltfläche als Senden ein. Es hat für mich funktioniert. – Amarnath

6

Vielleicht sollten Sie ‚novalidate‘ Attribut auf dem Formular-Tag hinzufügen nativen Browser Validierung zu vermeiden, wie hier angegeben https://docs.angularjs.org/guide/forms

+0

Danke, das hat mir klar gemacht, dass ich es nicht schon getan habe. – Pato

20

Auch wenn die Taste in der Form ist und noch ng-submit nicht funktioniert dann Taste ändern type zu einreichen.

<button type="submit" class="btn btn-success" ng-click="login()">Login</button> 

P. S: Andere Antworten half mir nicht, bis ich den Knopf Typ submit geändert. Hoffe das hilft.

+0

Dies wirkt sich auch auf aus, es muss eine Schaltfläche zum Senden im Formular vorhanden sein (Schaltfläche oder Eingabetyp = "Senden") oder ng-submit funktioniert nicht. – emerino

+1

Beides funktioniert nicht, aber das Ändern eines 'ng-if' auf dem btn in' ng-show', löst das Problem. Was könnte das Problem sein? –

2

Dies betrifft auch, es muss eine Senden-Schaltfläche im Formular sein (Schaltfläche oder Eingabe-Typ = "Senden") oder ng-submit wird nicht funktionieren.

0

für mich war das Problem 'erforderlich' Tag auf einem der Formularfelder. Nach dem Entfernen dieses Tags funktionierte das Formular erneut. Die alte Art, solche Probleme zu lösen, besteht darin, einen Teil Ihres Formulars zu kommentieren und den Code auszuführen.

Ich bevorzuge die Verwendung von 'Novalidate' Tag auf dem Formular und Button mit type = "submit", so dass die Validierung des Formulars von eckigen durchgeführt wird.

1

Versehentlichste Fehler, stellen Sie sicher, dass Sie Ihren js-Code kompilieren.

+1

Bitte lesen Sie [wie Sie antworten] (https://stackoverflow.com/help/how-to-answer). – ZimSystem

+0

Dies ist keine definitive Antwort auf die Frage, bitte bearbeiten Sie Ihren Beitrag – Ibo