1

This is a weird problem. I'm using Ruby on Rails and I have a simple angular app that uses ng-model. That's it. Dead simple.

It works when I pull the page up. I type my name in the input and it binds it to the DOM. Awesome.

This is on the edit page for the Account. I go to /account and I click through to /account/edit. I look at the Spot where everything is supposed to render and instead of seeing my name (via ng-init), I get: {{ user.first_name }} {{ user.last_name }}.

Key Question: Why is Angular only rendering when I reload the page and not when I visit the page?

Code:

<div class="container">
  <%= form_for current_user, url: user_path(current_user.id), method: :patch do |f| %>
    <div class="col-md-5 col-md-offset-1">
      <div class="row" id="my-account-user-info">
        <div>
          <%= image_tag current_user.gravatar_url(:secure => true), :class => "img-rounded" %>
        </div>
        <div>
          <p class="lead">{{ user.first_name }} {{ user.last_name }}</p>
          <p class="lead">{{ user.email }}</p>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <%= f.label :first_name %>
        <%= f.text_field :first_name,
                         :placeholder => current_user.first_name,
                         :class       => "form-control",
                         "ng-model"   => "user.first_name",
                         "ng-init"    => "user.first_name='#{current_user.first_name}'" %>
      </div>
      <div class="form-group">
        <%= f.label :last_name %>
        <%= f.text_field :last_name,
                         :placeholder => current_user.last_name,
                         :class       => "form-control",
                         "ng-model"   => "user.last_name",
                         "ng-init"    => "user.last_name='#{current_user.last_name}'" %>
      </div>
      <div class="form-group">
        <%= f.label :email %>
        <%= f.email_field :email,
                          :placeholder => current_user.email,
                          :class       => "form-control",
                          "ng-model"   => "user.email",
                          "ng-init"    => "user.email='#{current_user.email}'" %>
      </div>
    </div>
  <% end %>
</div>
BenMorganIO
  • 2,036
  • 17
  • 37
  • That is hard to tell. Could you share the javascript code as well? – Walter Brand Mar 31 '14 at 06:42
  • 1
    Probably has conflict with turbolink. Check this one [http://stackoverflow.com/questions/14797935/using-angularjs-with-turbolinks/15488920#15488920][1] [1]: http://stackoverflow.com/questions/14797935/using-angularjs-with-turbolinks/15488920#15488920 – xiaoboa Mar 31 '14 at 06:42
  • The JavaScript code is literally just including angular. You're seeing it all here. I switched turbolinks to false and same problem. – BenMorganIO Mar 31 '14 at 06:44
  • My apologies. Removed it from `application.js` and works now. F*cking turbolinks. – BenMorganIO Mar 31 '14 at 06:46

0 Answers0