7

I have the following config for ui router state in my angularjs app.

    $locationProvider.html5Mode(true);
    $stateProvider
        .state('index', {
            url: '/index?zoom&center',
            views: {
                'map': {
                    controller: 'MapCtrl',
                    templateUrl: 'map.html'
                }
            },
            reloadOnSearch:false
    });

However, the back forward button in the browser go to different url, but I need to reload the page with the urls as stateParams.

For example: User1 go to page http://www.example.com/index?zoom=2&center=1,2. then he does bunch operation in the page, the url becomes http://www.example.com/index?zoom=12&center=3,4

Then he presses the back button, the url changes to the previous one, but I need to reload my page to let the controller read the query parameters to do the right thing...

Any way to let it work with browser back/forward?

kdu
  • 1,179
  • 1
  • 11
  • 18
  • "but the page does not refresh"- if you mean that page doesn't get full refreshed than you are missing the point of angular which is to have back/forward buttons working without full page refresh which makes things faster, – Vlado Pandžić Apr 14 '15 at 20:36
  • but I need to reload my page based on the urls. – kdu Apr 14 '15 at 20:39

1 Answers1

1

Have you tried setting reloadOnSearch to true? If that doesn't suite your needs, perhaps check out this question: Force AngularJS to reload a route although option reloadOnSearch is set to false

A simpler alternative may be to just force the reload with window.location = newUrl whenever necessary.

Community
  • 1
  • 1
AlexMA
  • 8,952
  • 5
  • 39
  • 55
  • 1
    for sure I want to use the ui router states. but still want to use the browser history as well, since the user might click them in the browser. – kdu Apr 14 '15 at 20:38
  • You can't have both as far as I know, since the state is erased when the page is reloaded. You would have to store the state in the url or in a cookie to preserve it through page-reloads. There are 3rd-party components to help with this. – AlexMA Apr 14 '15 at 20:40
  • @user23878 I updated my answer; I think I misinterpreted your question. – AlexMA Apr 14 '15 at 20:47
  • This is close to the answer. I tried $route.reload(), but it does not work. Then I have to use window.location = newUrl to force to reload. – kdu Apr 15 '15 at 16:31