I have created an app with a homescreen listing a number of groups. For each group I have several tabs, say a members tab, an event tab and a home tab going back to the list of groups. I have set this up with an abstract state group with URL /group/:gid that takes a group id as parameter. The tabs with states group.members and group.events then need to show members or events for the last selected group.
If I set this up without further “logic”, only the first tab that the homepage directly links to will display the correct group. The other tab will remember its previous setting/URL and show the last/previous selected group.
My question is this: is there a way to have all the tabs take the parameter of the abstract state that the previous tab had? I tried things with clearHistory and such but that didn’t work.
I got it to work in a way by storing the last selected group id in a service and checking that in the controller with BeforeEnterView. But this does not seem a very elegant solution and in IonicView on my iPhone4 you really notice the page redirect (without Ajax calls).
Sorry for crossposting, I also created a stackoverflow question, but that didn’t help yet. Maybe the experts lurk here
I think this might be fixed with clearing the cache somewhere, but ideally I do not want to clear it each time for each tab. While navigating between tabs in the same group the cache should be used. Only when going back to the home screen and after a new group is selected should the cache of the tabs be cleared.
(emphasis mine)
Have you considered calling $ionicHistory.clearCache() when a new group is selected in the home screen?
Thanks for trying to help out! I had tried that and just gave it another go. It does not seem to work. When I first select group 1 (which directs to /group/1/members), click the tab expenses (this works, app was just started), go back to home, select group 2 (which directs to /group/2/members and then select members, it will still go to /group/1/members.
Maybe I am not doing the clearing right (I just started with Ionic/Angular) but I am passing ‘$ionicHistory’ in the controller declaration and $ionicHistory in the function declaration. Can I somehow check that the history was indeed cleared?
I made this yesterday to play with views, cache and navigation, maybe you could fork it and we’d get some nice debugging output too http://codepen.io/nuba/pen/yNzzVz
I was afraid you would ask for a codepen. That stuff is not for the faint of heart! That many files templates and controllers all combined prevented me from having a earlier go at it.
There is probably loads of stuff that can be improved, but I would be very interested to know if you can get the tabs to behave like I want. Thanks for taking the time.
The group-members view was being updated, but the rest of the groups view was stale. By adding cache: false to the state in that codepen it worked fine.
The funny thing is that it only occurred to me to test this simple change after hours digging the source code and tests for ionic and ui-router, and concocting some workaround with a groups.dummy state (to set all views and redirect the user). Heh, good thing we won’t be needing it! It wasn’t pretty!
I had hoped there would be a simple solution for this, but had not expected it to be this elegant. I tried many options, but I guess I missed this one.
Sorry you had to spend so much time on in though. If you like you can put this answer in stackoverflow and I will mark it as the accepted answer. That’s the least I can do
Updated my answer there so in the future others stumbling on the same issue will find the fix! It’s cool, man, learned a lot! It’s one thing to browse the code casually, and another, completely different, thing, when you’re driven by a compelling challenge: to get the tab navigation to behave reasonably – so thank you!
– so thank you!