ボタンをクリックするとフォームが更新されます。

Question

2 つのボタン ラベルを持つ Angular のフォームがあります。ボタンは、ng-click でフォームを送信します。もう 1 つのボタンは、ng-click を使用したナビゲーション専用です。ただし、この 2 番目のボタンをクリックすると、AngularJS によってページが更新され、404 エラーがトリガーされます。関数にブレークポイントを設定すると、関数がトリガーされます。次のいずれかを行うと停止します。

1. ng-click を削除すると、ボタンによってページが更新されなくなります。
2. 関数内のコードをコメントアウトしても、ページは更新されません。
3. ボタンのラベルをアンカー ラベル () に変更し、href="" を追加しても更新されません。 。

後者が最も簡単な解決策のように思えますが、AngularJS が関数の後にページのリロードを引き起こすコードを実行するのはなぜですか?バグのようです。

これは次の形式です:

<form class="form-horizo​​ntal" name="myProfile" ng-switch-when="profile">
  <フィールドセット>
    <div class="コントロールグループ">
      <label class="control-label" for="passwordButton">パスワード</label>
      <div class="コントロール">
        <button id="passwordButton" class="secondaryButton" ng-click="showChangePassword()">変更</button>
      </div>
    </div>

    <div class="buttonBar">
      <button id="saveProfileButton" class="primaryButton" ng-click="saveUser()">保存</button>
    </div>
  </フィールドセット>
</form>

これはコントローラー メソッドです:

$scope.showChangePassword = function() {
  $scope.selectedLink = "パスワード変更";
};

Answer 1

デフォルトのハンドラーをブロックしてみてください:

html：

リーリー

js：

リーリー

Answer 2

W3C 仕様 を見ると、送信したくないボタン要素に type='button' をマークすることを試すのは明白なようです。 。

記載されている場所には特別な注意を払う必要があります