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 — lin
– lin, Commented Jun 13, 2017 at 9: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 github.com/ui-router/sticky-states — Chris T
– Chris T, Commented Jun 14, 2017 at 3:55

score 0 · Accepted Answer · 2017-06-13 10:30:42Z

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' });

Nope, it will reload previous state. But I want to show it without reloading. Means whatever was selected should be preserved.
viewreport state also you maintain as part of body state and should use same controller and html. then it will work
Navigating to body.htmlreports.reportarea.viewreport is not opening my whole screen page.

Collectives™ on Stack Overflow

Navigate back to state without reloading template

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related