14

使用 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 添加到 <%= f.text_field :name %> ？

4

7 回答 7

27

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

于 2012-06-20T17:13:15.147 回答
9

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

f.text_field :name, :ng => {:model => "name"}
于 2012-06-20T17:20:06.073 回答
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 指令文档，您可以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
          });
        }
      }
    });
于 2014-03-03T19:28:28.563 回答
3

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

<%= f.input :id, as: :select, label: false, prompt: 'Select a selection',  input_html: { "ng-model" => ""} %>
于 2014-03-09T20:32:33.000 回答
0

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

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

于 2012-06-19T19:41:27.940 回答
0

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

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

于 2014-05-28T11:21:40.337 回答
0

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

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

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

于 2016-08-11T10:33:18.003 回答