javascript - 차이 - 양식 내의 버튼을 클릭하면 페이지가 새로 고침됩니다.




새로고침 없이 리로드 (6)

기본 동작을 방지하기 위해 지시문을 사용합니다.

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

그리고 나서, html로 :

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

이 지시어는 <a> 및 다른 모든 태그와 함께 사용할 수도 있습니다

나는 두 개의 단추 태그가있는 Angular의 양식을 가지고 있습니다. 버튼 하나를 클릭하면 양식이 제출됩니다. 다른 버튼은 순전히 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>

다음은 컨트롤러 메소드입니다.

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

기본 처리기를 방지하려고 할 수 있습니다.

html :

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

js :

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

왜 아무도 아마도 가장 단순한 해결책을 제안했는지 의문입니다.

<form> 사용하지 마십시오.

<whatever ng-form> 은 IMHO가 HTML 형식이 아닌 더 나은 일을 수행하지만 브라우저 자체에서 제출할 것이 없습니다. 각도를 사용할 때 정확하게 올바른 행동입니다.


이 대답은 질문과 직접적으로 관련이 없을 수도 있습니다. 스크립트를 사용하여 양식을 제출하는 경우입니다.

ng-submit 코드 에 따르면

 var handleFormSubmission = function(event) {
  scope.$apply(function() {
    controller.$commitViewValue();
    controller.$setSubmitted();
  });

  event.preventDefault();
};

formElement[0].addEventListener('submit', handleFormSubmission);

폼에 이벤트 리스너를 추가합니다. 그러나 form.submit ()을 호출하여 제출이 시작될 때 submit 이벤트 핸들러는 호출되지 않습니다. 이 경우, ng-submit은 기본 동작을 방해하지 않습니다. ng-submit 핸들러에서 preventDefault를 직접 호출해야합니다.

합리적으로 명확한 답을 제공하기 위해 HTML 양식 제출 알고리즘 항목 5는 submit 메서드를 호출하여 폼을 전송하지 않은 경우에만 폼이 전송 이벤트를 전달한다는 것을 나타냅니다. 즉, 단추 또는 다른 암시 적으로 제출 된 경우 제출 이벤트 만 전달합니다 방법, 예를 들어 포커스가 입력 유형 텍스트 요소에있는 동안 Enter 키를 누릅니다).

onsubmit 핸들러가 링크에서 submit ()을 사용하여 제출 한 양식을 포착 할 수 없음


W3C 스펙을 살펴보면 , 버튼 엘리먼트를 제출하는 것을 원하지 않을 때 type='button' 버튼 엘리먼트를 표시하는 것이 명백한 것처럼 보일 것입니다.

특별히 주목해야 할 것은 그것이 말하는 곳입니다.

type 속성이 지정되지 않은 button 요소는 type 속성이 "submit"로 설정된 button 요소와 동일한 것을 나타냅니다.


<button type="submit"> 유지할 수 있지만 <form>action="" 속성을 제거해야합니다.





angularjs