CODEWITHSUNDEEP
javascriptruby-on-railsrubyangularjserb
user3292534
user3292534

Reputation:

Ruby view accessing angular.js variable

I've got angular ng-repeat in Ruby .erb view. Now, I need to make a link_to to a page, dedicated to some IP address. First I tried

<td><%= link_to '{{ roll.system }}' ,'server/'+'{{ roll.system }}' %></a></td>,

where {{roll.system}} is angular.js variable containing the ip. Overall path would be like localhost/server/127.0.0.1 and would not work because of the dots in IP address. Now, I am trying to make a hash out of IP address, and then decode it after routing is done.

My current code is:

<td><%= link_to '{{ roll.system }}' ,"server/"+Base64.urlsafe_encode64('{{ roll.system }} %></a></td>

Here's the problem. Base64 encodes the string as it is, creating a hash of literal string '{{ roll.system }}'. I need it to look up the value it refers to in angular variable.

I don't get why is it a problem since link_to works fine.

Please no design advices a-la 'rewrite your app from scratch'.

Upvotes: 0

Views: 643

Answers (1)

seddy
seddy

Reputation: 801

I think you're slightly confusing two separate concepts - the rendering of a Rails view and the playing out of the Angular.

When you hit your app, your first suggestion will render the Rails view and turn your link_to into this raw HTML:

<td><a href="{{ roll.system }}/server/{{ roll.system }}"></a></td>

Once rails has rendered the view and returned the page to the browser, your Angular code will then kick in, find the {{ roll.system }} calls and modify this to something like:

<td><a href="127.0.0.1/server/127.0.0.1"></a></td>

The problem with the second attempt is that it the Base64.urlsafe_encode64 will run when rendering the Rails view, so the Angular won't have replaced roll.system at this point. So you'll end up with this raw HTML regardless of what roll.system is:

 <td><a href="{{ roll.system }}/server/e3sgcm9sbC5zeXN0ZW0gfX0="></a></td>

Instead, you might want to try base64 encoding the string in the Angular. So you might want to look into using something like angular-base64. Which you can use to perhaps do the following:

<td><a href="{{ roll.system }}/server/{{ roll.encoded_system }}"></a></td>

Where you set roll.encoded_system in your Angular controller. As Martin mentions below, there's a native window.btoa() method which can be used for this. I'm not entirely sure if you can use directly in the template though, it may still need to be called in the controller.

Upvotes: 1

Related Questions