Question

我有一个我想通过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让我想起了蜜獾。它只是不在乎。

Answer 1

我知道我参加派对已经很晚了，但是如果你还没弄清楚，你可以保留行动并确保通过将$event传递给{{1功能。然后，在完成所有处理后，您可以在控制器中使用ng-submit。

所以在你的情况下，它将是：

event.preventDefault();

希望这有帮助。

Answer 2

嗯，你不是以“Angular方式”做的。 Angular提供了一个名为ng-submit的指令，它可以为你做阻止（只要你没有在表单上指定一个action属性）。

标记（有验证！）

<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!');
       });
    };
});

Answer 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

Answer 4

这是所有其他答案的更好解决方案。

假设您已将html5验证必需属性附加到表单元素。

现在

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

现在你正在运作

$scope.Save = function($event){

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

    return false;
}

这不仅会触发html5验证，还会阻止表单提交重定向。

Answer 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;
};

Angular JS不允许preventDefault或return false来处理表单提交

5 个答案: