javascript - Reload page on browser backforward button in AngularJS with ui router - Stack Overflow

admin管理员组

文章数量:1023758

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 ;center=1,2. then he does bunch operation in the page, the url bees ;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?

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./index?zoom=2&center=1,2. then he does bunch operation in the page, the url bees http://www.example./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?

• javascript
• angularjs
• angular-ui-router
• html5-history

Share Improve this question Follow edited Apr 14, 2015 at 20:42 kdu asked Apr 14, 2015 at 20:14 kdukdu 1,25944 gold badges1212 silver badges1818 bronze badges 2

• "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ć Commented Apr 14, 2015 at 20:36
• but I need to reload my page based on the urls. – kdu Commented Apr 14, 2015 at 20:39

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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.

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 ;center=1,2. then he does bunch operation in the page, the url bees ;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?

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./index?zoom=2&center=1,2. then he does bunch operation in the page, the url bees http://www.example./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?

• javascript
• angularjs
• angular-ui-router
• html5-history

Share Improve this question Follow edited Apr 14, 2015 at 20:42 kdu asked Apr 14, 2015 at 20:14 kdukdu 1,25944 gold badges1212 silver badges1818 bronze badges 2

• "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ć Commented Apr 14, 2015 at 20:36
• but I need to reload my page based on the urls. – kdu Commented Apr 14, 2015 at 20:39

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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.

本文标签： javascriptReload page on browser backforward button in AngularJS with ui routerStack Overflow