Angular JS не разрешает preventDefault или возвращает false для работы с отправкой формы

У меня есть форма, которую я бы хотел отправить через AJAX:

<form class="form-inline ng-pristine" ng-submit="sendForm()" method="post" action="/sign_up" accept-charset="UTF-8">

$scope.sendForm = (e) ->
  e.preventDefault ->
  console.log 'sendForm()'
  return false

Появится console.log, и он сразу же отправит форму.

Он игнорирует как e.preventDefault(), так и return false.

AngularJS напоминает мне медового барсука. Это просто все равно.

Ответ 1

Я знаю, что я очень опаздываю на вечеринку, но если вы еще не определились, вы можете сохранить действие и убедиться, что форма фактически не отправлена, передав $event функции ng-submit. Затем вы можете использовать event.preventDefault(); в своем контроллере после выполнения всей вашей обработки.

Итак, в вашем случае это будет:

<form class="form-inline ng-pristine" ng-submit="sendForm($event)" method="post" action="/sign_up" accept-charset="UTF-8">

$scope.sendForm = (e) ->
  // doing stuff
  e.preventDefault()

Надеюсь, что это поможет.

Ответ 2

Ну, вы не делаете это "Angular". Angular предоставляет директиву ng-submit, которая делает для этого preventDefault для вас (пока у вас нет атрибута действия, указанного в вашей форме).

Разметка (с проверкой!)

<form name="myForm" ng-submit="sendForm()">
  <div>
    <input type="text" name="name" ng-model="data.name" required/>
    <span ng-show="myForm.name.$error.required && myForm.name.$dirty">required</span>
  </div>
  <div>
    <input type="email" name="email" ng-model="data.email" required/>
    <span ng-show="myForm.name.$error.required && myForm.name.$dirty">required</span>
    <span ng-show="myForm.name.$error.email && myForm.name.$dirty">invalid email</span>
  </div>
  <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>

код

app.controller("MyCtrl", function($scope, $http) {
    $scope.sendForm = function (){
       $http.post('/Submit/To/Url', $scope.data).success(function(data) {
           alert('done!');
       });
    };
});

Ответ 3

Вы можете получить событие, передав $event в свой ng-click или ng-submit. Это похоже на инъекцию зависимостей, за исключением выражений.

HTML

<form class="form-inline ng-pristine" ng-submit="sendForm($event)" method="post" action="/sign_up" accept-charset="UTF-8">

CoffeeScript

$scope.sendForm = (e) ->
  e.preventDefault()
  console.log 'sendForm()'
  false

Ответ 4

Вот лучшее решение всех других ответов.

Предположим, что у вас есть атрибут html5 validation, прикрепленный к элементам формы.

Теперь

<button ng-submit="Save($event)">SEND ME</button>

И теперь вы выполняете функцию

$scope.Save = function($event){

    $event.preventDefault();
    .
    . // may be an ajax request
    .

    return false;
}

Это не только вызовет проверку html5, но и это предотвратит перенаправление формы.

Ответ 5

Другой способ решить это с помощью директив.

app.directive("submit", [function () {
    return {
        scope: {
            submit: "="
        },
        link: function (scope, element, attributes) {
            element.bind("submit", function (loadEvent) {
                return scope.submit(loadEvent);
            });
        }
    }
}]);

<form submit="sendForm" method="post" action="/sign_up">

$scope.sendForm = function(e) {
  if ($scope.whatever)
      return true;
  else
      return false;
};