Angularjs Integration mit Ruby On Rails Forms

Question

Mit Angularjs häufig Elemente wie ng Klick oder ng-Modell ist wie so direkt in dem HTML-Formularelement geschrieben ....

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

Wie würde ich Mach das mit Schienen? Wie nutzen Schienen eingebettet Rubin und erzeugen die html ....

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

Wie würde ich das ng-Modell zu <% = f.text_field hinzu: name%>?

Answer 1

Idealerweise verfügen Sie wollen nicht eingebettet Rubin Interpolation und Angular der Interpolation sein Mischen. Es ist besser, wenn Ruby asynchron JSON an Angular liefert und Angular die Daten auf der Clientseite ausfüllt.

Answer 2

Ich denke, dass Sie die HTML-Option verwenden können, um beliebige Elementattribute festzulegen. Habe es nicht mit Angularjs speziellen Attribute versucht obwohl ;-)

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

Answer 3

Versuchen Sie dies, wenn es sich um ein Bindestrich getrennt Wort handelt, müssen Sie in eine Hash-Notation setzen.

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

Answer 4

Ich war mit AngularJS Richtlinien arbeiten und Schienen 4, um die Bootstrap-picker jQuery-Plugin Arbeit an einem Rails 4 erb Vorlage zu machen, der Code, den ich in der text_field_tag verwendet wird, ist der folgende:

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

Es ist wichtig zu bemerken, dass dies mit AngularJS Richtlinien arbeitet, der Code, den Sie auf dem DOM ist wie folgt:

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

ich mit dem di gearbeitet rective auf folgende Weise:

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

Hinweis, dass nach AngularJS directive docs können Sie restrict einen Klassennamen, so dass Sie auf Ihrem text_field_tag jede Klassennamen verwenden kann, und es wird auch funktionieren.

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

Hier finden Sie was für mich gearbeitet (Aber es wird Fehlermeldung („Bitte geben Sie den Namen.“ Deaktivieren) von AngularJS, dh required: "required"):

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

Answer 6

Auf meinem aktuellen Projekt, hatte ich Um statische Templates in eckige Seiten zu transformieren, habe ich jbuilder views innerhalb der Template gerendert und in ng-init abgelegt.

Wenn der Bildschirm jemals Teil einer einzelnen Seite App wird, muss ich einfach das Rendern entfernen und eine Abfrage an die API hinzufügen, um diese Daten zu laden. So macht Twitter es, und es ist einfach und effektiv.

Answer 7

Wenn Sie ng-model verwenden, bedeutet dies, dass Sie das form_for-Verhalten für Objekte überschreiben. Wenn Sie beispielsweise

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

haben, bedeutet das, dass das Textfeld den vom rails Controller übergebenen Wert nicht rendern wird. Sie müssen den Wert des Benutzernamens zum Winkelmodell im Winkelregler hinzufügen.