Rails 4 application using AngularJS v1.2.13.
I have a view that will, once loaded, populate itself with data loaded asynchronously from the server.
Currently I get the naked {{content/scope variable}} displayed when I navigate to this page.
However, a simple refresh of that page makes the view and the Angular app function perfectly.
It's not the ng-bind issue as it really seems like JS is broken on the initial load rather than just late in loading.
Any idea what I am doing wrong?
Installing this gem https://github.com/kossnocorp/jquery.turbolinks solved the problem.
The alternative was to disable turbolinks by adding data-no-turbolink to the body tags of layouts where I didn't want to use it.
I had the same issue. I think you need to bootstrap Angular manually to play nice with turbolinks...
In you code you should have something like:
angular.module("YourApplication")
You need to replace the previous code with the following code in order to bootstrap Angular manually.
angular.module('YourApplication').run(['$compile', '$rootScope', '$document', function($compile, $rootScope, $document) {
return $document.on('page:load', function() {
var body, compiled;
body = angular.element('body');
compiled = $compile(body.html())($rootScope);
return body.html(compiled);
});
}])
Disable turbolinks seems not to be a good solution, since it became the default in Rails 4. Turbolinks overrides the normal page loading process, the event angular automatic initialization relies on doesn't fire on page reload. Read How turbolinks works and How Angular does in automatic initialization for more detail.
To overcome the conflict, just bootstrap angular manually
$(document).on 'page:load', ->
$('[ng-app]').each ->
module = $(this).attr('ng-app')
angular.bootstrap(this, [module])
