Используя angular.js, часто элементы, такие как ng-click или ng-model, записываются непосредственно в элемент формы html, например...
<input type="text" ng-model="name">
Как мне это сделать с рельсами? Поскольку рельсы используют встроенный рубин и генерируют html....
<%= form_for(@user) do |f| %>
<%= f.label :name %>
<%= f.text_field :name %>
Как добавить ng-модель в <% = f.text_field: name% > ?
В идеале вы не хотите смешивать встроенную интерполяцию ruby и интерполяцию Angular. Лучше иметь рубин, асинхронно обслуживать JSON до Angular, и пусть Angular позаботится о заполнении данных на стороне клиента.
Попробуйте это, когда это слово, разделенное дефисом, вам нужно помещать в хэш-запись.
f.text_field :name, :ng => {:model => "name"}
Я работал с директивами AngularJS и Rails 4, чтобы сделать плагин jQuery bootstrap-datepicker на шаблоне erb Rails 4, код, который я использовал внутри 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
});
}
}
});
Обратите внимание, что в соответствии с директивой Directular вы можете 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" }
В моем текущем проекте мне пришлось начать преобразовывать статические шаблоны в страницы angular, что я сделал, чтобы отображать jbuilder-представления внутри шаблона и помещать его в ng-init.
Если экран когда-либо становится частью одностраничного приложения, мне просто нужно удалить этот рендер и добавить запрос в api для загрузки этих данных. То, как щебет это делает, и это просто и эффективно.
Если вы используете ng-model, это означает, что вы переписываете поведение form_for для объектов. Например, если у вас есть
= form_for :user do |f|
= f.text_field :username, 'ng-model': user.username
Это означает, что текстовое поле не будет выводить значение, переданное из контроллера rails. Вам нужно добавить значение имени пользователя в модель angular внутри контроллера angular.