Angular.js 与 Ruby On Rails 表单的集成

Posted 2023-02-22

【中文标题】Angular.js 与 Ruby On Rails 表单的集成

【英文标题】：Angular.js integration with Ruby On Rails Forms

【发布时间】：2012-06-21 19:50:26

【问题描述】：

使用 angular.js 通常像 ng-click 或 ng-model 这样的项目直接写在 html 表单元素中，像这样......

<input type="text" ng-model="name">

我将如何使用 Rails 做到这一点？由于 rails 使用嵌入式 ruby​​ 并生成 html....

<%= form_for(@user) do |f| %>
<%= f.label :name %>
<%= f.text_field :name %>

如何将 ng-model 添加到 ？

【参考方案1】：

理想情况下，您不想混合嵌入式 ruby​​ 插值和 Angular 的插值。最好让 ruby​​ 将 JSON 异步提供给 Angular，让 Angular 负责在客户端填写数据。

【讨论】：

是的，考虑到这一点，我认为代码明智。

你能稍微扩展一下吗？我有一个复杂的表单，其中包含 2 个级别的子表单，我正在将其转换为 Angularjs。子表单包含在 rails partials 中。我在 AngularJs 中看到这样做的唯一方法是将我的所有部分移出 /views/model 目录并将它们重新制作为 javascript 目录中的纯 html 文件（使用 ngRoute 访问）——这是最好的方法吗它？然后，如果 Angular 不起作用，我将失去表单的所有功能作为后备。还需要在许多表单元素中手动编码...也许我看错了？

【参考方案2】：

试试这个，当它是一个连字符分隔的单词时，你需要放在一个哈希符号中。

f.text_field :name, :ng => :model => "name"

【讨论】：

也可以使用字符串键："ng-model" => "name"

或ng_model: "name"

@MurifoX 它适用于新表单，如何编辑现有表单？它没有正确填写现有值？

你需要把:value属性设置为你的模型属性@model.attribute。

【参考方案3】：

我正在使用 AngularJS 指令和 Rails 4 以使 bootstrap-datepicker jquery 插件在 Rails 4 erb 模板上工作，我在 text_field_tag 中使用的代码如下：

<%= text_field_tag(:start_day, nil, class: 'form-control', datepicker: 'datepicker') %>  

请注意，这适用于 AngularJS 指令，您在 DOM 上获得的代码如下：

<input class="form-control" datepicker="datepicker" type="text">

我通过以下方式处理指令：

timeAdminCal.directive('datepicker', function()
      return 
        restrict: 'A',
        link: function ($scope, $element) 
          $element.datepicker(
            format: 'd/m/yyyy',
            autoclose: true,
            todayHighlight: true
          );
        
      
    );

注意，根据AngularJS directive docs，你可以restrict 一个类名，所以你可以在text_field_tag 上使用任何类名，它也可以工作。

timeAdminCal.directive('datepicker', function()
      return 
        restrict: 'C', // Bind DOM element by class name 'datepicker'
        link: function ($scope, $element) 
          $element.datepicker(
            format: 'd/m/yyyy',
            autoclose: true,
            todayHighlight: true
          );
        
      
    );

【参考方案4】：

以下对我有用（但它会禁用angularjs的错误消息（“请输入名称。”），即required: "required"）：

<%= f.input :id, as: :select, label: false, prompt: 'Select a selection',  input_html:  "ng-model" => "" %>

【参考方案5】：

我认为您可以使用 :html 选项来设置任何元素属性。虽然没有尝试过使用 angular.js 特殊属性 ;-)

f.text_field :name, :html => :ng-model => "name"

【讨论】：

传递带有值部分的 html 选项哈希，而不是 html 键，即 f.text_field :name, :ng-model => "name"

另外，文档是你的朋友：apidock.com/rails/v3.2.1/ActionView/Helpers/FormHelper/…

这对我来说毫无意义。当你调用一个助手时，它应该将一个字符串呈现回你的 html 模板，给定一些源参数。 Angular 的目标是在每次绑定更改时更新绑定，显然它不会再次神奇地调用 rails 助手。如果你想要 Angular 行为，你必须坚持使用纯 html。

这种方法的唯一问题是单引号会破坏它

@yagooar，这不太对。 <%= f.text_field :name, :ng-model => "name" %> 将（我从这里记忆中）在页面加载时输出<input type="text" id="model_name" name="model[name]" ng-model="name">，然后，在 HTML 完成之后，Angular 将解析页面并解释 input 与如果您跳过 Ruby 并直接编写 HTML - 那么仍然会创建正确的绑定并且它应该可以工作。再说一次，我同意混合 Ruby 助手和 Angular 指令可能是个坏主意。 （免责声明：我是 Angular 新手）

【参考方案6】：

在我当前的项目中，我不得不开始将静态模板转换为 Angular 页面，我所做的就是在模板中渲染 jbuilder 视图并将其放入 ng-init 中。

如果屏幕成为单页应用程序的一部分，我只需删除该渲染并向 api 添加查询以加载该数据。 Twitter 就是这样做的，而且简单有效。

【参考方案7】：

如果您使用 ng-model，这意味着您会覆盖对象的 form_for 行为。例如，如果您有

= form_for :user do |f|
  = f.text_field :username, 'ng-model': user.username

这意味着文本字段不会呈现从 rails 控制器传递的值。您需要将用户名的值添加到角度控制器内的角度模型中。