Navigate back to state without reloading template

Question

I have done some research but couldn't find a definitive answer. I have main application area where I load different screens. From one screen I want to open a page that would cover the whole screen. So, navigating to 'viewreport' does exactly that. And when I click on Browser's Back button or have my own Back button on the whole screen page I want to get back to the previous state without reloading its template and controller. Another words, I want to see all selections I have done prior opening the whole screen page. Here is my state configuration:

$stateProvider
        .state('body', {
            url: '/',
            abstract: true,
            template: '<div ui-view />'
        })
        .state('viewreport', {
            url: 'viewreport',
            templateUrl: 'wholescreen.html',
            controller: 'wholescreenController'
    });

I am loading different modules into the main 'body' state which might look like this:

function ($stateProvider) {
    $stateProvider.state('body.htmlreports', {
        templateUrl: function ($stateParams) {
                return 'htmlReports.html';
        },
        controller: 'htmlReportsController',
        url: 'htmlreports',
    }).state('body.htmlreports.reportarea', {
        templateUrl: 'htmlReportParams.html',
        controller: 'htmlReportParamsController',
    });

I am navigating to viewreport state from htmlReportParamsController controler. The new page then opens into the whole screen. That part works fine. But navigating back to htmlreports when clicking on the Browser's Back button will reload 'body.htmlreports' state. Is there a way of getting back to it without reloading its template?

Update. Why I think it's not a duplicate. I tried what's suggested in it before posting. This: $state.transitionTo('yourState', params, {notify: false});

still reloads 'yourState'. Also the use case in the provided link is not exactly as mine. Because the OP uses edit mode for already loaded view while I am loading a new view over the the whole screen.

Thanks

Possible duplicate of [UI-Router - Change $state without rerender/reload of the page](https://stackoverflow.com/questions/24581610/ui-router-change-state-without-rerender-reload-of-the-page) — lin, Jun 13 '17 at 09:11
You are describing what "Sticky States" does. If you use ui-router 0.x, you can use ui-router-extras sticky states. If you are on ui-router 1.0+ you can use sticky states from https://github.com/ui-router/sticky-states — Chris T, Jun 14 '17 at 03:55

score 0 · Answer 1 · 2017-06-13T10:30:42.603

0

Use

$window.history.back();

Add $window in dependency injections of your controller. This will refresh your page and wont reload data we selected.

Please maintain states like this

function ($stateProvider) {
$stateProvider.state('body.htmlreports', {
    templateUrl: function ($stateParams) {
            return 'htmlReports.html';
    },
    controller: 'htmlReportsController',
    url: 'htmlreports',
}).state('body.htmlreports.reportarea', {
    templateUrl: 'htmlReportParams.html',
    controller: 'htmlReportParamsController',
}).state('body.htmlreports.reportarea.viewreport', {
    url: 'viewreport'
});

edited Jun 13 '17 at 10:30

answered Jun 13 '17 at 09:59

1

Nope, it will reload previous state. But I want to show it without reloading. Means whatever was selected should be preserved. – Mark Jun 13 '17 at 10:06
1

viewreport state also you maintain as part of body state and should use same controller and html. then it will work – Jun 13 '17 at 10:15
Can you clarify what you mean? – Mark Jun 13 '17 at 10:20
Navigating to body.htmlreports.reportarea.viewreport is not opening my whole screen page. – Mark Jun 13 '17 at 10:43

Navigate back to state without reloading template

1 Answers1