AngularJS and Rails view requires page refresh

Question

I have a Rails app with AngularJS in some of the views. Whenever I click a link that brings me to a page, say /certifications I see this

bad reload

Then when I reload the page or request it by pressing enter in the url bar, it works and shows this

good reload

Is there a difference in how these two pages are being reloaded that is screwing up AngularJS. Do I need to user and angular router or something? I have put the code of the view and controller below. Thanks for the help!

Controller:

@aquaticsApp = angular.module 'aquaticsApp',
  ['ngResource', 'aquaticsAppFilters']


@aquaticsApp.controller 'CertsCtrl', ['$scope', 'Certs',
  @CertsCtrl = ($scope, Certs) ->
    $scope.formatDate = (dateString)  ->
      d = new Date(dateString)

      curr_month = d.getMonth() + 1
      curr_date = d.getDate()
      curr_year = d.getFullYear()

      "#{curr_month}/#{curr_date}/#{curr_year}"

    $scope.sorter =
      value: 'firstName'

    Certs.get (data) ->
      $scope.certNames = data.certification_names
      $scope.users = data.users
]

View:

<div ng-app='aquaticsApp' class='table-responsive'>
  <table ng-controller='CertsCtrl' class='table table-hover table-condensed'>
    <thead>
      <tr>
        <th ng-click='sorter.value="lastName"'>Last Name</th>
        <th ng-click='sorter.value="firstName"'>First Name</th>
        <th ng-click='sorter.value="location"'>Location</th>
        <th ng-repeat='certName in certNames' ng-click='sorter.value=certName.name'>
          {{certName.name}}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat='userData in users | orderBy:sorter.value'>
        <td>{{userData.lastName}}</td>
        <td>{{userData.firstName}}</td>
        <td>{{userData.location}}</td>
        <td ng-repeat='certName in certNames' class='{{userData[certName.name + "class"]}}'>
          {{formatDate(userData[certName.name])}}
        </td>
        </td>
      </tr>
    </tbody>
  </table>
</div>

You need to wait some time before angular compiles and links and then the expressions will be replaced. The code seems perfectly OK to me. You can try putting the binds(double `{`) within a div to avoid them being displayed before the page is ready. — Ivaylo Strandjev, Jan 21 '14 at 14:51
It doesn't seem to be compiling. The expressions stay there indefinitely and are not replaced, unless I do a refresh or visit the page through the address bar. — kmanzana, Jan 21 '14 at 14:54
Nifty trick with the binds so that it doesn't display the `{{}}` while loading. I tried it and it doesn't solve the problem I'm having. You're right! For whatever reason, none of my assets are being loaded by the page when I click the link to this page. Only the html file is showing up when I look at Network resources. — kmanzana, Jan 21 '14 at 14:58
With a little googling, it appears that the issue might be with turbolinks. Thanks for getting me started in the right direction because I was stumped. I'll let you know if I figure it out — kmanzana, Jan 21 '14 at 15:05

score 3 · Accepted Answer · edited May 23 '17 at 12:19

3

Found the answer here JQuery gets loaded only on page refresh in Rails 4 application.

Turbolinks stops plugins that bind to document ready from working. Since I figured I would continue to use turbolinks, I used the solution prescribed in the above SO answer and it worked.

edited May 23 '17 at 12:19

Community

1
1

answered Jan 21 '14 at 15:14

kmanzana

1,138
1
13
23

AngularJS and Rails view requires page refresh

1 Answers1