양식의 버튼을 클릭하면 페이지가 새로 고쳐집니다.

Question

두 개의 버튼 라벨이 있는 Angular 폼이 있습니다. 한 번의 클릭으로 ng上的表单-click。另一个按钮纯粹用于使用 ng-click 제출하여 탐색하세요. 그러나 두 번째 버튼을 클릭하면 AngularJS는 페이지를 새로 고쳐 404를 트리거합니다. 함수에 중단점을 배치했고 이것이 내 함수를 트리거합니다. 다음 중 하나를 수행하면 중지됩니다.

1. 삭제하면 ng-click 버튼을 사용해도 페이지가 새로 고쳐지지 않습니다.
2. 함수에서 코드를 주석 처리해도 페이지가 새로 고쳐지지 않습니다.
3. href="" 将按钮标记更改为锚标记 (<a>)을 사용하면 새로고침이 발생하지 않습니다.

후자가 가장 쉬운 해결책인 것 같지만 왜 AngularJS는 페이지를 다시 로드하게 만드는 내 함수 이후에 코드를 실행합니까? 버그인 것 같습니다.

양식은 다음과 같습니다

으아악

컨트롤러 방법은 다음과 같습니다.

<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>

Answer 1

기본 핸들러를 차단해 볼 수 있습니다:

html:

으아악

js:

으아악

Answer 2

W3C 사양을 보면 버튼 요소를 제출하지 않으려는 경우 type='button'를 사용하여 버튼 요소를 표시할 수 있는 것 같습니다.

여기에 특히 주의하세요