使用 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 添加到 ？
【问题讨论】：
标签： javascript html ruby-on-rails forms angularjs
理想情况下，您不想混合嵌入式 ruby 插值和 Angular 的插值。最好让 ruby 将 JSON 异步提供给 Angular，让 Angular 负责在客户端填写数据。
【讨论】：
/views/model 目录并将它们重新制作为 javascript 目录中的纯 html 文件（使用 ngRoute 访问）——这是最好的方法吗它？然后，如果 Angular 不起作用，我将失去表单的所有功能作为后备。还需要在许多表单元素中手动编码...也许我看错了？
试试这个，当它是一个连字符分隔的单词时，你需要放在一个哈希符号中。
f.text_field :name, :ng => {:model => "name"}
【讨论】：
"ng-model" => "name"
ng_model: "name"
:value属性设置为你的模型属性@model.attribute。
我正在使用 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
});
}
}
});
【讨论】：
以下对我有用（但它会禁用angularjs的错误消息（“请输入名称。”），即required: "required"）：
<%= f.input :id, as: :select, label: false, prompt: 'Select a selection', input_html: { "ng-model" => ""} %>
【讨论】：
我认为您可以使用 :html 选项来设置任何元素属性。虽然没有尝试过使用 angular.js 特殊属性 ;-)
f.text_field :name, :html => { :ng-model => "name" }
【讨论】：
html 键，即 f.text_field :name, :ng-model => "name"
<%= 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 新手）
在我当前的项目中，我不得不开始将静态模板转换为 Angular 页面，我所做的就是在模板中渲染 jbuilder 视图并将其放入 ng-init 中。
如果屏幕成为单页应用程序的一部分，我只需删除该渲染并向 api 添加查询以加载该数据。 Twitter 就是这样做的，而且简单有效。
【讨论】：
如果您使用 ng-model，这意味着您会覆盖对象的 form_for 行为。例如，如果您有
= form_for :user do |f|
= f.text_field :username, 'ng-model': user.username
这意味着文本字段不会呈现从 rails 控制器传递的值。您需要将用户名的值添加到角度控制器内的角度模型中。
【讨论】：