У меня есть форма в Angular, в которой есть два тега кнопок. Одна кнопка отправляет форму на ng-click. Другая кнопка предназначена для навигации только с помощью ng-click. Однако, когда эта вторая кнопка нажата, AngularJS вызывает обновление страницы, которое запускает 404. Ive сбросил точку останова в функции и запускает мою функцию. Если я выполняю любое из следующих действий, он останавливается:
ng-click, кнопка не вызывает обновление страницы.<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";
};
Если вы посмотрите на спецификацию W3C, казалось бы очевидной попыткой отметить ваши элементы кнопок с помощью type='button' когда вы не хотите, чтобы они отправляли.
В частности, следует отметить, что он говорит
Элемент кнопки без указанного атрибута типа представляет собой ту же вещь, что и элемент кнопки, с атрибутом типа, установленным как "отправить"
Вы можете попытаться предотвратить обработчик по умолчанию:
HTML:
<button ng-click="saveUser($event)">
JS:
$scope.saveUser = function (event) {
event.preventDefault();
// your code
}
Вы должны объявить атрибут ng-submit={expression} в тэге <form>.
Из документов ngSubmit http://docs.angularjs.org/api/ng.directive:ngSubmit
Разрешает привязать выражения angular к событиям onsubmit.
Кроме того, он предотвращает действие по умолчанию (которое для формы означает отправку запроса на сервер и перезагрузку текущей страницы).
Я использую директиву для предотвращения поведения по умолчанию:
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">, но должны удалить атрибут action="" <form>.
Интересно, почему никто не предложил возможное простейшее решение:
не использовать
<form>
A <whatever ng-form> делает ИМХО лучшей работой и без HTML-формы, ничего не может быть представлено самим браузером. Что является правильным правилом при использовании angular.
Первая кнопка отправляет форму, а вторая не
<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>
Добавьте действие в свою форму.
<form action="#">
Этот ответ не может быть напрямую связан с вопросом. Это просто для случая, когда вы отправляете форму с помощью сценариев.
Согласно ng-submit code
var handleFormSubmission = function(event) {
scope.$apply(function() {
controller.$commitViewValue();
controller.$setSubmitted();
});
event.preventDefault();
};
formElement[0].addEventListener('submit', handleFormSubmission);