Reload page on browser back/forward button in AngularJS with ui router

Question

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?

"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ć
– Vlado Pandžić, Commented Apr 14, 2015 at 20:36

Community · Accepted Answer · 2017-05-23 10:31:09Z

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.

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Apr 14, 2015 at 20:37

AlexMA

10.3k8 gold badges46 silver badges67 bronze badges

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

4 Comments

kdu Over a year ago

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.

AlexMA Over a year ago

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 Over a year ago

@user23878 I updated my answer; I think I misinterpreted your question.

kdu Over a year ago

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.

Collectives™ on Stack Overflow

Reload page on browser back/forward button in AngularJS with ui router

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related