點擊按鈕將引發表單刷新的行為
P粉523625080
P粉523625080 2023-08-14 20:46:02
0
2
529
<p>我在Angular中有一個表單,其中有兩個按鈕標籤。一個按鈕在<code>ng-click</code>上提交表單。另一個按鈕純粹用於使用<code>ng-click</code>進行導航。然而,當點擊這個第二個按鈕時,AngularJS會導致頁面刷新,觸發404錯誤。我在函數中設定了一個斷點,它會觸發我的函數。如果我執行以下任何操作,它就會停止:</p> <ol> <li>如果我移除<code>ng-click</code>,按鈕不會導致頁面重新整理。 </li> <li>如果我在函數中註解掉程式碼,它不會導致頁面刷新。 </li> <li>如果我將按鈕標籤更改為錨標籤(<code><a></code>)並添加<code>href=""</code>,它就不會導致刷新。 </li> </ol> <p>後者似乎是最簡單的解決方法,但為什麼AngularJS在我的函數之後運行任何導致頁面重新加載的程式碼?看起來像是個bug。 </p> <p>這是表單:</p> <pre class="brush:php;toolbar:false;"><form class="form-horizo​​ntal" name="myProfile" ng-switch-when="profile"> <fieldset> <div class="control-group"> <label class="control-label" for="passwordButton">Password</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()">Save</button> </div> </fieldset> </form></pre> <p>這是控制器方法:</p> <pre class="brush:php;toolbar:false;">$scope.showChangePassword = function() { $scope.selectedLink = "changePassword"; };</pre> <p><br /></p>
P粉523625080
P粉523625080

全部回覆(2)
P粉637866931

你可以嘗試阻止預設處理程序:

html:

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

js:

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

如果你查看W3C規格,似乎顯而易見的嘗試是在你不想要提交的按鈕元素上標記type='button'

特別要注意的是它所說的位置

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板