Durch Klicken auf die Schaltfläche wird das Formular aktualisiert.
P粉523625080
P粉523625080 2023-08-14 20:46:02
0
2
522
<p>Ich habe ein Formular in Angular mit zwei Schaltflächenbeschriftungen. Eine Schaltfläche sendet das Formular bei <code>ng-click</code>. Die andere Schaltfläche dient ausschließlich der Navigation mit <code>ng-click</code>. Wenn jedoch auf diese zweite Schaltfläche geklickt wird, veranlasst AngularJS eine Aktualisierung der Seite und löst einen 404-Fehler aus. Ich habe in der Funktion einen Haltepunkt gesetzt und er löst meine Funktion aus. Wenn ich einen der folgenden Schritte ausführe, stoppt es: </p> <ol> <li>Wenn ich <code>ng-click</code> entferne, führt die Schaltfläche nicht zu einer Aktualisierung der Seite. </li> <li>Wenn ich den Code in der Funktion auskommentiere, wird die Seite nicht aktualisiert. </li> <li>Wenn ich die Schaltflächenbeschriftung in eine Ankerbeschriftung (<code><a></code>) ändere und <code>href=""</code> hinzufüge, wird kein a verursacht Aktualisierung . </li> </ol> <p>Letzteres scheint die einfachste Lösung zu sein, aber warum führt AngularJS nach meiner Funktion Code aus, der dazu führt, dass die Seite neu geladen wird? Sieht aus wie ein Bug. </p> <p>Dies ist das Formular: </p> <pre class="brush:php;toolbar:false;"><form class="form-horizontal" name="myProfile" ng-switch-when="profile"> <fieldset> <div class="control-group"> <label class="control-label" for="passwordButton">Passwort</label> <div class="controls"> <button id="passwordButton" class="secondaryButton" ng-click="showChangePassword()">Change</button> </div> </div> <div class="buttonBar"> <button id="saveProfileButton" class="primaryButton" ng-click="saveUser()">Speichern</button> </div> </fieldset> </form></pre> <p>Dies ist die Controller-Methode: </p> <pre class="brush:php;toolbar:false;">$scope.showChangePassword = function() { $scope.selectedLink = "changePassword"; };</pre> <p><br /></p>
P粉523625080
P粉523625080

Antworte allen(2)
P粉637866931

你可以尝试阻止默认处理程序:

html:

<button ng-click="saveUser($event)">

js:

$scope.saveUser = function (event) {
  event.preventDefault();
  // 你的代码
}
P粉821274260

如果你查看W3C规范,似乎显而易见的尝试是在你不想要提交的按钮元素上标记type='button'

特别要注意的是它所说的位置

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage