30

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 はハニー アナグマを思い起こさせます。それは気にしません。

4

5 に答える 5

54

私はパーティーにかなり遅れていることを知っていますが、まだ理解していない場合は、アクションを保持$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()

お役に立てれば。

于 2014-03-16T21:17:24.517 に答える
44

まあ、あなたはそれを「角度のある方法」でやっているわけではありません。Angular は ng-submit と呼ばれるディレクティブを提供します。これは、(フォームで action 属性が指定されていない限り) 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!');
       });
    };
});
于 2013-01-25T14:46:54.000 に答える
5

$eventng-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
于 2014-06-12T18:03:23.407 に答える
4

これは、他のすべての回答のより良い解決策です。

フォーム要素に html5 validation required 属性が添付されているとします。

今

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

そして今、あなたは機能します

$scope.Save = function($event){

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

    return false;
}

これにより、html5 検証がトリガーされるだけでなく、フォーム送信のリダイレクトが防止されます。

于 2016-12-07T07:05:29.830 に答える
2

これを解決する他の方法は、ディレクティブを使用することです。

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;
};
于 2014-05-13T04:40:27.877 に答える