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

Question

두 개의 버튼 라벨이 있는 Angular 양식이 있습니다. 버튼은 ng-click 시 양식을 제출합니다. 다른 버튼은 순전히 ng-클릭을 사용한 탐색용입니다. 그러나 이 두 번째 버튼을 클릭하면 AngularJS는 페이지를 새로 고치고 404 오류를 발생시킵니다. 함수에 중단점을 설정하면 함수가 트리거됩니다. 다음 중 하나를 수행하면 중지됩니다.

<올>

ng-click을 제거하면 버튼으로 인해 페이지가 새로 고쳐지지 않습니다.

함수에서 코드를 주석 처리해도 페이지가 새로 고쳐지지 않습니다.

버튼 라벨을 앵커 라벨()로 변경하고 href=""를 추가하면 새로 고치다 .

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

다음 형식은 다음과 같습니다.

<form class="form-horizontal" name="myProfile" ng-switch-when="profile">
  <필드세트>
    <div class="control-group">
      <label class="control-label" for="passwordButton">비밀번호</label>
      <div class="controls">
        <button id="passwordButton" class="secondaryButton" ng-click="showChangePassword()">변경</button>
      </div>
    </div>

    <div class="buttonBar">
      <button id="saveProfileButton" class="primaryButton" ng-click="saveUser()">저장</button>
    </div>
  </필드세트>

<p>컨트롤러 메소드는 다음과 같습니다. </p>
<pre class="brush:php;toolbar:false;">$scope.showChangePassword = function() {
  $scope.selectedLink = "비밀번호 변경";
};

Answer 1

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

html:

으아악

js:

으아악

Answer 2

W3C 사양을 보면 제출하고 싶지 않은 버튼 요소에 type='button'를 표시하는 것이 당연한 것 같습니다.

표시된 위치에 특별한 주의를 기울이세요