3

Rails サーバー (認証用の Devise を使用) と AngularJS クライアントを使用しています。Rails によって生成されたフォームをクライアント側のページに追加し、ng-submit次のように Angular ディレクティブを追加しました。

<%= form_for("user",
    :url => user_session_path,
    :html => { "ng-submit" => "doSignIn()" }) do |f| %>

actionこれにより、次のように とng-submit属性の両方を持つフォームが生成されます。

<form accept-charset="UTF-8" action="/users/sign_in" method="post" ng-submit="doSignIn()">

囲んでいる のコントローラーの定義にはdiv、doSignIn現時点では何もしない関数があります。

$scope.doSignIn = function() {
    console.log($scope.email, $scope.password);
};

$scope.emailを$scope.password使用してバインドされng-modelます。または、少なくとも、そうであるはずです-私にはわかりません。なぜなら、送信をクリックすると常に に転送されるから/users/sign_inです。ng-submitを使用すると、フォームがユーザーをリダイレクトするのを防ぐという印象を受けました。ng-clickメソッドも使用する同じメソッドを使用して、送信ボタンに を追加しようとしました。doSignIn()また、イベントを渡して を呼び出してみましたevent.preventDefault()。私がリダイレクトされるのを止めるものは何もないようです。

私の目標は、最終的には AJAX でサインインを実行することですが、今のところ、自動リダイレクトを停止できることを証明するだけでも十分です!

4

3 に答える 3

2

この問題を解決する最もクリーンで論理的な方法は、 $event を ng-submit 関数に追加することであることがわかりました。次に、js ファイルで $event.preventDefault() を実行しました。私のコードは次のようになります。

_form.html.haml

%div{:'ng-controller' => 'FestivalCtrl'}
  = simple_form_for festival, :html => {:'ng-submit' => 'addFestival($event)', :action => nil} do |form|
    = form.input :name, :input_html => {:'ng-model' => 'newFestival.name'}, :label => 'Festival Name'
    = form.input :description, :input_html => {:'ng-model' => 'newFestival.description'}
    %button{:type => 'submit'}
      Submit Festival

  {{newFestival.name}}
  {{newFestival.description}}

  %ul
    %li{:'ng-repeat' => 'festival in festivals'}
      {{festival.name}}
      {{festival.description}}

festivals.js.coffee

app = angular.module('MFN', ['ngResource'])

app.factory 'Festival', ($resource) ->
  $resource('/festivals/:id', {id: '@id'}, {update: {method: 'PUT'}})


@FestivalCtrl = ($scope, Festival) ->  
  $scope.festivals = Festival.query()

  $scope.addFestival = ($event) ->
    $event.preventDefault()
    festival = Festival.save($scope.newFestival)
    $scope.festivals.push(festival)
    $scope.newFestival = {}
于 2013-09-08T14:14:18.057 に答える
1

フォームアクションが次のように実行されないようにするには、ハンドラーから false を返す必要があります。

 $scope.doSignIn = function() {
     if($scope.email && $scope.password){
         return(true);
     else{
         return(false);
     }
 };

上記の前提は、電子メールとパスワードの両方が存在する場合に送信し、それ以外の場合は送信したくないということです。

于 2013-01-25T09:11:53.877 に答える