[javascript] 양식 내에서 버튼을 클릭하면 페이지를 새로 고칩니다.

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

1. 를 제거해도 ng-click버튼이 페이지를 새로 고치지 않습니다.
2. 함수에서 코드를 주석 처리하면 페이지를 새로 고치지 않습니다.
3. 로 버튼 태그를 앵커 태그 ( <a>)로 변경하면 href=""새로 고침이 발생하지 않습니다.

후자는 가장 간단한 해결 방법 인 것처럼 보이지만 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>

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

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

답변

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

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

module.directive('preventDefault', function() {
    return function(scope, element, attrs) {
        angular.element(element).bind('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
        });
    }
});

<button class="secondaryButton" prevent-default>Secondary action</button>