양식에서 단추를 누르면 페이지 새로 고침
Angular에 두 개의 버튼 태그가 있는 양식이 있습니다.하나의 버튼으로 다음 날짜에 양식을 제출합니다.ng-click다른 버튼은 순수하게 다음을 사용하여 탐색하기 위한 것입니다.ng-click단, 이 두 번째 버튼을 클릭하면 Angular가JS로 인해 페이지 새로고침이 발생하여 404가 트리거되었습니다.함수의 중단점을 떨어뜨려 기능이 작동되고 있습니다.다음 중 하나를 실행하면 중지됩니다.
- 를 삭제하면,
ng-click, 버튼을 눌러도 페이지가 갱신되지 않습니다. - 함수의 코드를 코멘트해도 페이지 리프레쉬가 발생하지 않습니다.
- 버튼 태그를 앵커 태그로 변경하는 경우(
<a>)와 함께href=""새로고침은 발생하지 않습니다.
후자는 가장 간단한 회피책으로 보이지만 왜 Angular는JS는 내 기능 이후에 페이지를 새로고침하는 코드를 실행해도 됩니까?벌레 같아요.
폼은 다음과 같습니다.
<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";
};
W3C 사양을 보시면 버튼 요소에 마크를 붙이는 것이 당연할 것 같습니다.type='button'제출하기 싫을 때 말이죠.
특히 주목해야 할 것은 다음과 같습니다.
유형 속성이 지정되지 않은 버튼 요소는 유형 속성이 "submit"로 설정된 버튼 요소와 동일합니다.
디폴트 핸들러를 회피할 수 있습니다.
html:
<button ng-click="saveUser($event)">
js:
$scope.saveUser = function (event) {
event.preventDefault();
// your code
}
속성을 선언해야 합니다.ng-submit={expression}당신의 안에서<form>태그를 붙입니다.
ngSubmit docs http://docs.angularjs.org/api/ng.directive:ngSubmit 에서
온서밋 이벤트에 대한 각도 표현 바인딩을 netable로 합니다.
또한 기본 액션(양식의 경우 요청을 서버로 전송하고 현재 페이지를 새로고침함)을 방지합니다.
기본 동작을 방지하기 위해 지시문을 사용합니다.
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>기타 모든 태그
당신은 가질 수 있다<button type="submit">단, Atribute를 삭제해야 합니다.action=""의<form>.
왜 가장 간단한 해결책을 제안하지 않았는지 궁금합니다.
a를 사용하지 않다
<form>
A <whatever ng-form>IMHO가 더 나은 작업이고 HTML 폼이 없으면 브라우저 자체에서 제출할 것이 없습니다.앵귤러 사용 시 올바른 동작입니다.
양식에 작업을 추가합니다.
<form action="#">
이 답변은 질문과 직접 관련이 없을 수 있습니다.스크립트를 사용하여 양식을 제출하는 경우만 해당됩니다.
ng-submit 코드에 따름
var handleFormSubmission = function(event) {
scope.$apply(function() {
controller.$commitViewValue();
controller.$setSubmitted();
});
event.preventDefault();
};
formElement[0].addEventListener('submit', handleFormSubmission);폼에 이벤트청취자를 추가합니다.단, form.submit()를 호출하여 전송이 시작된 경우 전송 이벤트핸들러가 호출되지 않습니다.이 경우 ng-submit에 의해 디폴트액션이 방지되지 않습니다.ng-submit 핸들러에서 prevent Default를 직접 호출해야 합니다.
합리적으로 명확한 답변을 제공하기 위해 HTML 양식 제출 알고리즘 항목 5는 폼이 제출 메서드를 호출하여 제출 이벤트를 발송하지 않은 경우에만 발송한다고 기술하고 있습니다(즉, 버튼 또는 다른 암묵적인 메서드로 제출하는 경우(예를 들어 입력 유형의 텍스트 요소에 초점을 두고 Enter 키를 누르는 경우 등).).
링크에서 submit()를 사용하여 제출된 폼을 온서밋 핸들러에 의해 포착할 수 없음을 참조하십시오.
도 같은, .type="submit"로로 합니다.type="button"그리고 그것은 성공하였다.
첫 번째 단추는 양식을 제출하고 두 번째 단추는 양식을 제출하지 않습니다.
<body>
<form ng-app="myApp" ng-controller="myCtrl" ng-submit="Sub()">
<div>
S:<input type="text" ng-model="v"><br>
<br>
<button>Submit</button>
//Dont Submit
<button type='button' ng-click="Dont()">Dont Submit</button>
</div>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Sub=function()
{
alert('Inside Submit');
}
$scope.Dont=function()
{
$scope.v=0;
}
});
</script>
</body>
ㅇㅇㅇㅇㅇㅇㅇ를 돼요.FormsModule imports을 지정합니다.app.module.ts를 .import { FormsModule } from '@angular/forms';★★★★★★★★★★★...이거면 될 거야
언급URL : https://stackoverflow.com/questions/12319758/clicking-a-button-within-a-form-causes-page-refresh
'programing' 카테고리의 다른 글
| Javascript에서 소수점 1자리를 어떻게 반올림합니까? (0) | 2022.09.28 |
|---|---|
| PHP 쇼트태그를 유효하게 하는 방법 (0) | 2022.09.28 |
| Python에서 문자열을 Enum으로 변환 (0) | 2022.09.28 |
| PHP에서 변수의 존재를 테스트하는 가장 좋은 방법은 isset()이(가) 명확하게 끊어졌습니다. (0) | 2022.09.28 |
| JavaScript를 사용하여 운영체제에 대한 자세한 내용을 확인하는 방법 (0) | 2022.09.28 |