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
– Ivaylo Strandjev, Commented Jan 21, 2014 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
– kmanzana, Commented Jan 21, 2014 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
– kmanzana, Commented Jan 21, 2014 at 14:58

Community · Accepted Answer · 2017-05-23 12:19:47Z

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, 2017 at 12:19

CommunityBot

11 silver badge

answered Jan 21, 2014 at 15:14

kmanzana

1,2181 gold badge14 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

AngularJS and Rails view requires page refresh

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related