Durch Klicken auf die Schaltfläche wird das Formular aktualisiert.
P粉523625080
2023-08-14 20:46:02
<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>
你可以尝试阻止默认处理程序:
html:
js:
如果你查看W3C规范,似乎显而易见的尝试是在你不想要提交的按钮元素上标记
type='button'
。特别要注意的是它所说的位置