Passing AngularJS Data-Bind variable as a Ruby on Rails variable

Question

I am developing a Ruby on Rails application while using AngularJS for the front end. I am using AngularJS resource to query data out of my MySql database and storing them within the 'entries' variable. Ruby on Rails already has controllers setup for 'Showing','Editing', and 'Destroying' rows from the database so I'm not sure if I want to reinvent the wheel by ignoring these said controllers and using the AngularJS Resource instead. While using ng-repeat to filter my data I would also like to add the RoR 'Showing','Editing', and 'Destroying' links within each respected row. I am unable to use RoRs <% @songs.each do |song| %> statement because that would add a loop inside of my ng-repeat loop. Instead I simply want to use the AngularJS {{e.id}} variable and pass it into the <%= link_to 'Edit', edit_song_path(ID_VARIABLE) %> function, but RoR and AngularJS variables don't seem to play well together. Is there any "easy" way to do this?

    <div class="container">  
      <ul class="list-group">
        <table class="table">
          <thead>
            <tr>
              <th>Band</th>
              <th>Title</th>
            </tr>
          </thead>
          <tbody ng-repeat="e in entries | filter:searchFilter">
              <tr>
                  <td>{{e.band}}</td>
                  <td>{{e.title}}</td>
                  <td>{{e.id}}</td>
                  <td>
                      <!-- Pass 'e.id' to the 'link_to' function -->
                      <%= link_to 'Edit', edit_song_path(**{{e.id}}**) %>
                  </td>
              </tr>           
          </tbody>           
        </table>
      </ul>
    </div>
  </div>

You can't pass front-end code/variables to a back-end function. What you can do is expose the routes to Javascript, though. There's some handy gems out there that will do it for you. — sjagr
– sjagr, Commented Feb 26, 2016 at 18:38

sjagr · Accepted Answer · 2016-02-26 19:04:30Z

1

Rails can't see your Angular variables, but aside from using a nice gem to achieve what you want, you could also pass the Angular {{}} tags as a parameter for the Rails URL itself. Rails doesn't care for the existence of the ID that you're referring, only that you pass a parameter for it to refer to.

The only caveat is that you must unescape it:

<%= link_to 'Edit', CGI::unescape(edit_song_path('{{e.id}}')) %>

answered Feb 26, 2016 at 19:04

sjagr

16.6k5 gold badges43 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David Stump · Accepted Answer · 2016-02-26 18:47:50Z

The server side code (the rails helper) will render long before the javascript will, thus your js variable will not be available to pass into the rails helper.

The quickest (not ideal) way to handle this would be to not use the rails path helper and explicitly write out the path in an anchor element <a href="/thing/{{e.id}}/edit">Edit</a>.

A few years ago I wrote a blog about using Angular with Rails without diving fully into client-side MVC if you are ever interested: http://www.littlelines.com/blog/2014/02/21/how_to_use_angularjs_and_keep_loving_rails/

Using something like Angular Rails Resource might allow you reference your songs edit endpoint without explicitly hard-coding it everywhere throughout your application.

Hope that helps some.

P.S. The js_routes gem references by sjagr is a interesting approach as well.

Collectives™ on Stack Overflow

Passing AngularJS Data-Bind variable as a Ruby on Rails variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related