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

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

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

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

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

후자는 가장 간단한 해결 방법 인 것처럼 보이지만 AngularJS가 페이지를 다시로드하게하는 함수 후에 코드를 실행하는 이유는 무엇입니까? 버그 인 것 같습니다.

형식은 다음과 같습니다.

Password Change Save

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

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

W3C 사양을 살펴보면 버튼 요소 type='button' 를 제출하지 않으려는 경우 버튼 요소를 표시하는 것이 분명 합니다.

특히 주목해야 할 것은

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

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

html :

js :

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

태그 에서 속성 ng-submit={expression} 을 선언해야 합니다 .

ngSubmit 문서에서 http://docs.angularjs.org/api/ng.directive:ngSubmit

이벤트를 제출할 때 각도 표현식을 바인딩 할 수 있습니다. 또한 기본 조치를 방지합니다 (형식의 경우 서버에 요청을 보내고 현재 페이지를 다시로드하는 것을 의미 함).

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

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

그런 다음 html로 :

Secondary action

이 지시문은 다른 모든 태그 와 함께 사용할 수도 있습니다

를 유지할 수는 있지만의 속성 action="" 을 제거해야합니다 .

아무도 왜 가장 간단한 해결책을 제안하지 않았는지 궁금합니다.

사용하지 마십시오

A 는 IMHO가 더 나은 작업을 수행하며 HTML 양식이 없으면 브라우저 자체에서 제출할 내용이 없습니다. 각도를 사용할 때 정확히 올바른 행동입니다.

양식에 조치를 추가하십시오.

이 답변은 질문과 직접 ​​관련이 없을 수도 있습니다. 스크립트를 사용하여 양식을 제출하는 경우에만 해당됩니다.

According to ng-submit code

var handleFormSubmission = function(event) { scope.$apply(function() { controller.$commitViewValue(); controller.$setSubmitted(); }); event.preventDefault(); }; formElement[0].addEventListener('submit', handleFormSubmission);

It adds submit event listener on the form. But submit event handler wouldn't be called when submit is initiated by calling form.submit(). In this case, ng-submit will not prevent the default action, you have to call preventDefault yourself in ng-submit handler;

To provide a reasonably definitive answer, the HTML Form Submission Algorithm item 5 states that a form only dispatches a submit event if it was not submitted by calling the submit method (which means it only dispatches a submit event if submitted by a button or other implicit method, e.g. pressing enter while focus is on an input type text element).

See Form submitted using submit() from a link cannot be caught by onsubmit handler

First Button submits the form and second does not

S: Submit //Dont Submit Dont Submit var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.Sub=function() { alert('Inside Submit'); } $scope.Dont=function() { $scope.v=0; } });

참고URL : https://stackoverflow.com/questions/12319758/clicking-a-button-within-a-form-causes-page-refresh

from http://big-blog.tistory.com/2482 by ccl(A) rewrite - 2020-04-29 23:01:22