3

The biggest problem is that I even don't really know how to describe the problem I'm asking about. It's the first time in more then a decade of wed development.

I'm working on a Rails 4.1.1 app and using angularjs pretty extensively, though I don't know it well yet. And everything seemed to be working fine up to the moment when I tried to add some browser history manipulation to my app (e.g. changing the displayed url when listing though a paginated list so that that url can be copied and distributed). To do this I added a config to my app.

@app.config ($locationProvider) ->
  $locationProvider.html5Mode(true)

And then in my angular controller added the $location binding like this

$scope.$watch 'pagination.cur', (newVal) ->
  $scope.loadNews newVal
  $location.path("/news").search({page:newVal})

(this is ment to change the url in the browser searchbox when the user goes from one page to another).

That workes well, the url does change appropriately, but all the sudden all the html links on the page got broken. I mean litteraly. I click any link on the page (even outside the controller div), the url in the serchbox changes appropriately, but the turbolinks toes not fire the Ajax request to get the new page content. If I then refresh the page, it loads the correct page.

I know it's really weird. What's weirder, that I don't get any JavaScript errors or anything unusual. The only way I found to get the links working again - is to remove that initial config.
But when I do it, the $location falls back to hashtag syntax, wich is really not at all what I want.

My only assumption is that there could be some kind of a conflict between angular $location service and turbolinks when handling browser history, but even if that's right, I have no idea how to get around it. And I really need that kind of manipulation, 'cause I'm going to be using it alot in this and other apps.

I really don't know, what other information on this problem may be usefull, don't hasitate to ask for updates. I'll post whatever I can.

P.S. Btw, can this kind of manipulation be done by means of turbolinks? 'Cause it's exactly the same thing turbolinks does when changing the displayed url after page body reload, but I can't find any documentation on its public API for that.

UPDATE

  1. Have no idea what's the source of the problem yet, but it seems to be not related to the turbolinks gem. Removing turbolinks requirements from the application.js file does not change anything.

  2. Using $window.history.pushState instead of $location.path solves the functionality problem, but does not explain the initial bug.

Almaron
  • 4,127
  • 6
  • 26
  • 48
  • Maybe this will help: http://stackoverflow.com/questions/14797935/using-angularjs-with-turbolinks ... although maybe you should disable turbolinks and see if it works at that point. – Mike Quinlan Jun 05 '14 at 19:38
  • @Mike that does not help much. I've already read it and implemented that solution to bootstrap the app on every page reload. It's not the case here. – Almaron Jun 05 '14 at 19:39
  • I have the same problem. So did you replace every reference of `$location.path()` to `$window.history.pushState`? – bigpotato Jul 28 '14 at 14:12

0 Answers0