javascript - Angular JS 不允许 preventDefault 或返回 false 来处理表单提交

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给该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()

希望这可以帮助。

Answer 2

好吧，你不是用“Angular 方式”来做的。Angular 提供了一个名为 ng-submit 的指令，它会为您执行 preventDefault （只要您没有在表单上指定 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">

咖啡脚本

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

Answer 4

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

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

现在

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