AngularJS ng-submit 在 Rails 生成的表单上失败答案

【问题标题】：AngularJS ng-submit fails on a Rails-generated formAngularJS ng-submit 在 Rails 生成的表单上失败
【发布时间】：2013-01-08 14:09:18
【问题描述】：

我正在使用 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 执行登录，但现在，只要证明我可以停止自动重定向就很棒了！

【问题讨论】：

标签： ruby-on-rails forms devise angularjs

【解决方案1】：

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

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

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

【讨论】：

【解决方案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 = {}

【讨论】：

【解决方案3】：

您需要从处理程序返回 false 以防止表单操作像这样执行：

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

上面的假设是，如果电子邮件和密码都存在，您想提交，否则不想提交。

【讨论】：