There's two related, but kind of beefy, questions here. I'm not responding because I have the answer, but rather because I've been wrestling with similar things. They feel like instances of a problem where we want to deal with view state properly, storing information that's not normally preserved.
First: I find that overall window scroll position is maintained when I use the back and forward button to move between routes in my SPA. However, I'm not doing any nested scrolling, just letting the browser throw bars on the overall window. I did run into a similar problem with tabsets - if you use the angular-ui tabs or a homegrown implementation of tabs that use ng-ifs and whatnot, clicking back and forward will forget the current selected tab on the page. This kind of makes sense- each time the user visits a route, the controller is instantiated. Angular, AFAIK, doesn't cache controllers or any of that. So, for my particular tab state problem, I decided to encode the tab state in the URL. Each tab was different enough in use (and different users might want different default-active tabs), so I had /noun/:nounID/activetab routes put into the application. That way, active-tab state is preserved in the URL. This isn't particularly generalizable (or simple), as it only really works when there's one tabset per application route (two tabsets on the same page wouldn't be able to use the URL thing). It also requires changing the route definition's Javascript, which is more annoying than just putting another <tab></tab> inside the <tabset> directive on the page. A more complicated scroll memory and active filter thing could be handled either by stashing data in a view state object somewhere in the scope and then, after transitioning into the state, have the controller further manipulate things with $anchorScroll and so forth. That, however, doesn't preserve state across sessions or allow sharing of state if a user bookmarks or emails a URL. Stuff you want there clearly has to get stashed in the URL, and IMO ought to be stored in a query param. The router is in charge of getting the proper view template hooked up to the proper controller, but the controller is in charge of fiddling with the view itself to change what's getting displayed. I'm *going* to have this problem soon - one thing we'll have is long sets of replies in my current project, and I'd like to have a permalink that takes the user to a particular reply /#/noun/:nounID?jumpTo=123 and the ability to scroll the user to the last-seen reply when they load the page (that's a delay though, but it'd use $anchorScroll in the controller). e On Mon, Jun 30, 2014 at 11:30 PM, Chris Cinelli < [email protected]> wrote: > Related question. > Imagine that the page is similar to the one in play.google.com but it has > 4 different filters. > > How would you encode the URLs? > > In case I go with the overlay route, I was thinking something like: > www.example.com/#!/search/filter1=xx|filter2=yy|filter3=zz|filter4=ww > <http://www.example.com/#!/search/filter1=xx%7Cfilter2=yy%7Cfilter3=zz%7Cfilter4=ww> > for the pure search > > www.example.com/#!/search/filter1=xx|filter2=yy|filter3=zz|filter4=ww/open/123 > <http://www.example.com/#!/search/filter1=xx%7Cfilter2=yy%7Cfilter3=zz%7Cfilter4=ww/open/123> > for the open details on resources 123 > > That are capture by the router as: > url: '/search/:filters' > url: '/search/:filters/open/:id' > > That implies that "|" and "/" are not a valid character for the filters > and I need to split the $stateParams.filters to get the data > > Another way would be > www.example.com/#!/search?filter1=xx&filter2=yy&filter3=zz&filter4=ww > for the pure search > > www.example.com/#!/search?filter1=xx&filter2=yy&filter3=zz&filter4=ww&open=123 > for the open details on resources 123 > > but in this case I cannot use the router to separate the states. > > What do you think? > > > On Monday, June 30, 2014 7:59:55 PM UTC-7, Chris Cinelli wrote: >> >> Back button and scrolling positions are not easy on dynamic apps. What is >> easy on a statically generated page becomes quite hard in a dynamic app. >> On a statically generated page the back button and scrolling position is >> managed by the browser and the browser does a very good job to bring you >> back at the exact scroll location where you left off. >> On a dynamically generated app, it is not so easy and even the pros got >> it wrong: >> >> - Look at https://play.google.com/store/search?q=cat&c=apps - >> Apparently there are tons of application about cats... so let go through a >> few of them to find the most awesome cat's app. I keep scrolling and >> scrolling and every once in a while I see one that is promising and I want >> to see the details. But after I opened, I find out that is not the one I >> want. Now I click on the back button and ... booooo ... I am at the top of >> the list. Now I have to scroll down a few times until I find where I left >> off. I am kind of surprised to see thatGoogle has problems with this but >> they are in good company... >> - On https://www.facebook.com when you click on something on your >> newsfeed, it opens a new page. When you click back it tries to bring you >> back where you started but now the feed look different and even if you are >> scrolled at the same position there is something different on the viewport >> instead of the feed item you clicked on. Even if you you are in a person >> profile and you click on a person feed and then you click on a person that >> commented on a post, when you go back you are in the wrong position... >> mmmmhhh. >> - In Pinterest it works as desired: http://www.pinterest.com/ >> search/pins/?q=cat They use an overlay div with overflow-y: scroll; >> position: fixed; right: 0; top: 0; bottom: 0; left: 0; and a higher >> z-index >> to show the details. If you click on a comment on the pin it close that >> overlay and bring you on a new page (the whole page is NOT reloaded but >> the >> dom changed) when you click the back button, the previous content is >> restored and it still bring you where you were on the page. Cool! >> - Twitter also does a good job to restore you in the right position! >> >> >> I am using https://github.com/angular-ui/ui-router and by default the >> scroll behavior between different routes does not work as desired. >> >> What are the best practices to make it work? >> This is what I found so far: http://stackoverflow.com/ >> questions/14107531/retain-scroll-position-on-route-change-in-angularjs >> and I wonder how good and robust these answer are. >> >> -- > You received this message because you are subscribed to the Google Groups > "AngularJS" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To post to this group, send email to [email protected]. > Visit this group at http://groups.google.com/group/angular. > For more options, visit https://groups.google.com/d/optout. > -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
