Mengklik butang dalam borang menyebabkan halaman dimuat semula

Question

Saya mempunyai bentuk Sudut dengan dua label butang. Hantar dengan satu klik ng上的表单-click。另一个按钮纯粹用于使用 ng-click untuk menavigasi. Walau bagaimanapun, apabila butang kedua diklik, AngularJS menyebabkan halaman dimuat semula, mencetuskan 404. Saya telah meletakkan titik putus dalam fungsi dan ia mencetuskan fungsi saya. Ia berhenti jika saya melakukan mana-mana perkara berikut:

1. Jika saya mengalih keluar ng-click, butang itu tidak menyebabkan halaman dimuat semula.
2. Jika saya mengulas kod dalam fungsi, ia tidak menyebabkan halaman dimuat semula.
3. Jika saya menggunakan href="" 将按钮标记更改为锚标记 (<a>) ia tidak menyebabkan penyegaran.

Yang terakhir nampaknya merupakan penyelesaian yang paling mudah, tetapi mengapakah AngularJS menjalankan sebarang kod selepas fungsi saya yang menyebabkan halaman dimuat semula? Nampak macam pepijat.

Borang adalah seperti berikut:

<form class="form-horizontal" 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>

Ini adalah kaedah pengawal:

$scope.showChangePassword = function() {
  $scope.selectedLink = "changePassword";
};

Answer 1

Anda boleh cuba menyekat pengendali lalai:

html:

js:

$scope.saveUser = function (event) {
  event.preventDefault();
  // your code
}

Answer 2

Jika anda melihat Spesifikasi W3C, nampaknya anda boleh cuba menggunakan type='button' untuk menandakan elemen butang apabila anda tidak mahu ia diserahkan.

Beri perhatian khusus kepada tempat yang tertulis