Angular.js integration with Ruby On Rails Forms

Angular.js integration with Ruby On Rails Forms

本文关键字：On Rails Forms Ruby with js integration Angular      更新时间：2023-09-26

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

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

我将如何使用导轨做到这一点？ 由于rails使用嵌入式Ruby并生成html。

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

如何将 ng 模型添加到 <%= f.text_field ：name %> ？

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

试试这个，当它是一个连字符分隔的单词时，你需要放入哈希表示法。

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

我正在使用 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 指令文档，您可以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
          });
        }
      }
    });
以下是对

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

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

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

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

在我目前的项目中，我必须开始将静态模板转换为角度页面，我所做的是在模板内渲染 jbuilder 视图并将其放入 ng-init 中。

如果屏幕成为单页应用程序的一部分，我只需删除该呈现并向 api 添加查询即可加载该数据。这就是Twitter的做法，它既简单又有效。

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

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

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

相关文章：