Angular.js интеграция с Ruby On Rails Forms

Используя 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% > ?

Ответы

Ответ 1

В идеале вы не хотите смешивать встроенную интерполяцию ruby и интерполяцию Angular. Лучше иметь рубин, асинхронно обслуживать JSON до Angular, и пусть Angular позаботится о заполнении данных на стороне клиента.

Ответ 2

Попробуйте это, когда это слово, разделенное дефисом, вам нужно помещать в хэш-запись.

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

Ответ 3

Я работал с директивами 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
          });
        }
      }
    });

Ответ 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" }

Ответ 6

В моем текущем проекте мне пришлось начать преобразовывать статические шаблоны в страницы angular, что я сделал, чтобы отображать jbuilder-представления внутри шаблона и помещать его в ng-init.

Если экран когда-либо становится частью одностраничного приложения, мне просто нужно удалить этот рендер и добавить запрос в api для загрузки этих данных. То, как щебет это делает, и это просто и эффективно.

Ответ 7

Если вы используете ng-model, это означает, что вы переписываете поведение form_for для объектов. Например, если у вас есть

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

Это означает, что текстовое поле не будет выводить значение, переданное из контроллера rails. Вам нужно добавить значение имени пользователя в модель angular внутри контроллера angular.