Клацання кнопки у формі викликає оновлення сторінки

У мене є форма у кутовій, у якій є два теги кнопок. Одна кнопка подає форму на 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";
};

Якщо ви подивитесь на специфікацію 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

Дозволяє прив'язувати кутові вирази до подій, що надсилаються.

Крім того, це запобігає дії за замовчуванням (що для форми означає надсилання запиту на сервер та перезавантаження поточної сторінки).

Я використовую директиву, щоб запобігти поведінці за замовчуванням:

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>

<whatever ng-form>Робить ІМХО краще і без 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 не перешкоджає дії за замовчуванням, вам доведеться викликати prevenDefault самостійно в обробнику ng-submit;

Для надання достатньо остаточної відповіді, пункт 5 алгоритму подання форми HTML зазначає, що форма розсилає лише подію подання, якщо вона не була подана, викликаючи метод подання (це означає, що вона розсилає подія подання лише у випадку, якщо вона подана кнопкою або іншим неявним метод, наприклад натискання клавіші Enter, коли фокус знаходиться на текстовому елементі типу введення).

Див. Форму, подану за допомогою submit () із посилання, не може бути зафіксовано надісланим обробником

Перша кнопка подає форму, а друга - ні

<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';вгорі цього файлу ... це спрацює.