Angular UI Router states

Question

I have two states. One state is a table with domains and the second state is information about a domain. The table has filters (dropdown selects, dropdown checkboxes) that can be applied to the table data. You can click into the domain from the table that triggers the second state (state1.domain).

My question is when I click away from state1 into state1.domain and then click back to state1 how can i preserve my filtered data and not reinitialize the controller? Currently, when I click back to state1 my filters have been cleared and so is the table data.

$stateProvider
.state ('state1', {
    url: '/state1',
    views: {
        "main@": {
            controller: 'StateOneCtrl',
            templateUrl: 'folder/state1.tpl.html'
        }
    },
    ncyBreadcrumb: { label: 'State One' },
    data: { pageTitle: 'State One', showTitle: false}
})
.state('state1.domain', {
    url: '/:domain',
    views: {
        "main@": {
            controller: 'StateOneDomainCtrl',
            templateUrl: 'folder/state1-domain.tpl.html'
        }
    },
    ncyBreadcrumb: { label: '{{domain}}' },
    data: { pageTitle: 'State One Domain', showTitle: false }
})

Its bit similar as this one http://stackoverflow.com/questions/31542972/how-to-persist-optional-parameter-on-browser-back-in-ui-router only you are using `data` option of state and I'm using `params` — Pankaj Parkar, Jul 23 '15 at 14:30
Sorry I forgot to mention I'm using breadcrumbs to navigate back. — , Jul 23 '15 at 14:36
in any case those values doesn't preserved by `ui-router`, you need to maintain in service/factory — Pankaj Parkar, Jul 23 '15 at 14:38
@PankajParkar Yup, the service/factory way is an other really good option that i forgot to mention. — Okazari, Jul 23 '15 at 14:40
@Okazari yes I know..I had mentioned that in my question.. I'm going to put bounty on my question after 27 mins.. I want other way on it. — Pankaj Parkar, Jul 23 '15 at 14:42
Just found this https://github.com/angular-ui/ui-router/issues/1158 about the "notify" attribute that could be set to false to prevent events (such as reloading controller) but it is actually not working (bug). — Okazari, Jul 23 '15 at 15:14

Okazari · Accepted Answer · 2015-07-23T14:49:57.573

0

Using Services

You can store theses values in a service. On your controller initialization you will just set up the controllers var with the stored var in the service.

May be the best solution.

Using session storage

In my opinion one of the way to go is by using the session storage to store the filters within a navigation flow into you application.

In you controller your will init the filters vars like this :

$scope.filterName = sessionStorage.filterName

On each filter change you will save to sessionStorage the value

//In your HTML on the filter
ng-change="onFilterNameChange()"

//In your JS
$scope.onFilterNameChange = function(){
    sessionStorage.filterName = $scope.filterName
}

And that's pretty much all.

If you want to be able to "clean" the filters you could also do this you could manage an optional url param (like ?resetFilters=true) that clean the filters.

Using query params

You could also (if there is not that much filters) explicitly sets the filters in the URL like this

.state ('state1', {
    url: '/state1?filter1&filter2&filter3',
    views: {
        "main@": {
            controller: 'StateOneCtrl',
            templateUrl: 'folder/state1.tpl.html'
        }
    },
    ncyBreadcrumb: { label: 'State One' },
    data: { pageTitle: 'State One', showTitle: false}
})

But you may be stuck as you can't give an object to the URL (whereas you can stringify one for your sessionStorage.

Hope it helped.

edited Jul 23 '15 at 14:49

answered Jul 23 '15 at 14:33

Okazari

4,597
1
15
27

what if there are 10 filter parameter? will it be good solution to pass it through url? – Pankaj Parkar Jul 23 '15 at 14:37
@PankajParkar Depends on the tastes. I'd prefer not to give 10 filter in my URL (wheras Google pretty much give all the informations in the url) If i had that much filters i would go for the sessionStorage solution. – Okazari Jul 23 '15 at 14:39
local storage might be one way to handle this. I was also considering using a service to hold the state of the filters when the user navigated between states since my biggest issue is the controller reinitializes itself when the user clicks back to state1. – Jul 23 '15 at 14:40
@ibtjw In my opinion sessionStorage (not localStorage) is a way to go. But the service is a really really good option too if not better. – Okazari Jul 23 '15 at 14:41
Right, session storage not local storage. :) – Jul 23 '15 at 14:44
Do you need an exemple about the service way or is it fine for you if i just mention it ? – Okazari Jul 23 '15 at 14:48
I already started writing the service, thanks. :) It just seems odd that ui-router doesn't have any kind of mechanism that will hold a state for you if you click away, or to preserve the controllers state. – Jul 23 '15 at 14:49
@ibtjw Didn't realize it before but you've both right. Maybe we should argue a bit more on this thread https://github.com/angular-ui/ui-router/issues/2115 – Okazari Jul 23 '15 at 14:51
@Okazari If you add any comment on that thread would help others who are facing this issue... I don't think so its implementation issue in any sense.. – Pankaj Parkar Jul 23 '15 at 14:53
@ibtjw if you are little more worried about the issue the you could also add an comment..I already updated my issue by adding your question too.. – Pankaj Parkar Jul 23 '15 at 15:00

Angular UI Router states

1 Answers1

Using Services

Using session storage

Using query params