How to put angularjs attributes in rails erb

Question

I have a rails form that looks like this:

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
  <%= devise_error_messages! %>


  <div><%= f.label :email %><br />
  <%= f.text_field :email %></div>


  <div><%= f.label :password %><br />
  <%= f.text_field :password %></div>

  <div><%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
    <%= f.password_field :current_password, autocomplete: "off" %></div>


  <div><%= f.submit "Update" %></div>
<% end %>

However, I'd like to tie the email text field to an AngularJS model, so that the value of the email form input is always tied to a $scope variable. In plain HTML, it would look like this:

<input name="email" ng-model="myValue"></input>

However since it's erb and not plain html, I'm not sure how to tie angular data to it.

How can I connect an ng-model attribute to an erb form in rails?

Answer 1

You should pass the angular attributes in the data attribute of the input, like so:

<%= f.text_field :email, data: { 'ng-model' => 'myValue' } %>

This will add the angular attribute with a data- prefix.