Mengklik butang akan menyebabkan borang dimuat semula.

Question

Saya mempunyai borang dalam Angular dengan dua label butang. Butang menyerahkan borang pada ng-click. Butang lain adalah semata-mata untuk navigasi menggunakan ng-click. Walau bagaimanapun, apabila butang kedua ini diklik, AngularJS menyebabkan halaman dimuat semula, mencetuskan ralat 404. Saya menetapkan titik putus dalam fungsi dan ia mencetuskan fungsi saya. Jika saya melakukan mana-mana perkara berikut, ia akan berhenti:

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 menukar label butang kepada label sauh () dan menambah href="", ia tidak menyebabkan segarkan semula.

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.

Ini ialah borang:

<form class="form-horizontal" name="myProfile" ng-switch-when="profile">
  <set medan>
    <div class="control-group">
      <label class="control-label" for="passwordButton">Kata Laluan</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 ialah kaedah pengawal:

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

Answer 1

Anda boleh cuba menyekat pengendali lalai:

html:

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

js:

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

Answer 2

Jika anda melihat Spesifikasi W3C , nampaknya perkara yang jelas untuk dicuba ialah menanda type='button' pada elemen butang yang anda tidak mahu serahkan.

Beri perhatian khusus kepada lokasi yang dinyatakan