3

我正在使用 Rails 服务器（使用 Devise 进行身份验证）和 AngularJS 客户端。我已将 Rails 生成的表单添加到我的客户端页面，添加ng-submitAngular 指令，如下所示：

<%= 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. 我的印象是 usingng-submit会阻止表单重定向用户。我还尝试ng-click使用相同的方法向提交按钮添加一个，该方法也使用该doSignIn()方法，我什至尝试将事件传递给它并调用event.preventDefault(). 似乎没有什么能阻止我被重定向。

我的目标最终是使用 AJAX 进行登录，但现在，只要证明我可以停止自动重定向就很棒了！

4

3 回答 3

4

我的印象是使用 ng-submit 会阻止表单重定向用户。

<form>如果没有action与之关联的属性，这只是一个正确的假设。当您使用 Railsform_for帮助器时，它action会在您指定url属性时为您生成一个。

要阻止提交表单，您必须遵循上述 Abraham P 的建议，以及return false;您不想提交表单的地方。

于 2013-08-02T18:19:42.397 回答
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}}

节日.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 回答