integración angularjs con Ruby On Rails Forms

Question

Uso angularjs a menudo artículos como NG-clic o ng-modelo se escriben directamente en el elemento de formulario HTML como tal ....

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

¿Cómo me hacer eso con rieles? Como se utiliza rieles rubí incrustado y genera el código HTML ....

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

¿Cómo puedo añadir el ng-modelo para <% = f.text_field:% name>?

Answer 1

Idealmente, usted no quiere ser la mezcla de interpolación rubí incrustado e interpolación de angular. Es mejor que ruby ​​asincrónicamente sirva JSON a Angular, y deje que Angular se encargue de completar los datos en el lado del cliente.

Answer 2

Creo que puede usar la opción: html para establecer los atributos de los elementos. no lo han intentado con atributos especiales angularjs aunque ;-)

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

Answer 3

Pruebe esto, cuando se trata de una palabra separada por un guión, debe poner dentro de una notación hash.

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

Answer 4

estaba trabajando con AngularJS directivas y los carriles 4 a fin de que el sistema de arranque-selector de fechas de trabajo jQuery plugin en una plantilla erb carriles 4, el código que he utilizado en el interior del text_field_tag es la siguiente:

<%= text_field_tag(:start_day, nil, class: 'form-control', datepicker: 'datepicker') %> 

es importante tener en cuenta que esto funciona con AngularJS directivas, el código que se obtiene en el DOM es el siguiente:

<input class="form-control" datepicker="datepicker" type="text"> 

trabajé con el di rective de la siguiente manera:

timeAdminCal.directive('datepicker', function(){ 
     return { 
     restrict: 'A', 
     link: function ($scope, $element) { 
      $element.datepicker({ 
      format: 'd/m/yyyy', 
      autoclose: true, 
      todayHighlight: true 
      }); 
     } 
     } 
    }); 

en cuenta que, de acuerdo con AngularJS directive docs que pueda restrict un nombre de clase, por lo que puede usar cualquier nombre de la clase en su text_field_tag y funcionará también.

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 
      }); 
     } 
     } 
    }); 

Answer 5

Lo siguiente es lo que funcionó para mí (Pero va a desactivar mensaje de error ("Por favor, introduzca su nombre.") De AngularJS, es decir required: "required"):

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

Answer 6

En mi proyecto actual, que tenía para comenzar a transformar las plantillas estáticas en páginas angulosas, lo que hice fue representar las vistas de jbuilder dentro de la plantilla y ponerlas en ng-init.

Si la pantalla alguna vez se convierte en parte de una aplicación de una sola página, simplemente tendré que eliminar esa representación y agregar una consulta a la API para cargar esos datos. Así es como Twitter lo hace, y es simple y efectivo.

Answer 7

Si usa ng-model, esto significa que sobrescribe el comportamiento form_for para objetos. Por ejemplo, si tiene

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

Esto significa que el campo de texto no representará el valor pasado por el controlador de rieles. Debe agregar el valor del nombre de usuario al modelo angular dentro del controlador angular.