I have a page that lists a bunch of vendors, when you click one it brings you to a new page that shows more info about the vendor. Right now when you go back to the list view it reloads all the data, i’d like to have it go back to the list view with the data that was there and the same scroll position. Anyone know how to accomplish that?
You can’t have it go back to the list view with the data that was already there. When the app changes to a new controller, the scope is destroyed - including the data.
To avoid reloading the data from the server, you need to use a Service with perhaps a cache (memory or localstorage). The service can store the data and provide it to the controller when requested.
Right now, lists automatically scroll back to the previous position : only if the data is not reloaded.
Well I am using nested views, which you would think would maintain the data since it is the same controller. For example the vendor list view is the parent of the vendor view page and they use the same controller, but for some reason it reloads when I hit the back button.
I must admit I’m not particularly familiar with nested states using the same controlller. So, I don’t know definitively if the controller reloads or not. Do this : Put a console.log("Controller reloaded") statement in the controller. Then navigate between states. See if the log statement runs each time.
I’m going to open an issue about the scroll position not sticking after reloading. I’ve seen this a couple of times. We need some mechanism to retain the scroll position AFTER data is loaded.
However, that will not avoid your data reloading issue. If the controller does in fact reload on each state change, you must use a service to cache the data so it doesn’t do another round trip to the server.
FYI : Have opened GitHub Issue # 719 on this topic : https://github.com/driftyco/ionic/issues/719
Hi,
I have an app with two views (list view and detail page) and when I go back to the list it always goes back to the top of the page.
I’ve been looking at these two examples and I don’t really understand why the first one goes back to the top while the scrolls to the same position:
http://codepen.io/SatadruBhattacharjee/pen/jsLtb ( back to top of page )
http://codepen.io/calendee/pen/zLobr ( back to previous position )
The only difference I see between those examples is in the MovieIndexCtrl, where the first one does
MovieService.all().then(function(movies) {
$scope.movies = movies;
});
while the second one does
$scope.movies = MovieService.allSync();
As I read in your answer, “When the app changes to a new controller, the scope is destroyed - including the data.”… To me, both examples reload $scope.movies with new data (because it has been destroyed before), so I don’t understand why the second example works and the first one doesn’t… what am I missing?
I have been trying to replicate it in my and no luck, I always get the top of the page when I go back to the list.
Thanks!
I’ve been having trouble getting scroll position remembered as well, despite caching my $http calls.
Regarding “$scope.movies = MovieService.allSync();” - I thought that you couldn’t assign promises directly to scope variables in angular anymore, as they don’t resolve for “security” purposes or something. But I’m not sure what angular version was in ionic 0.9.26 that those examples are posted on.
Let me know if you figure it out 
The first example doesn’t work because the reloaded data is not available for at least 1 second after the navigation back to the list. I purposefully put in a 1 sec delay to simulate an Ajax request. When the controller reloads, the scroll system tries to scroll down to the last position. However, as there is no content in the view, there is no where to scroll to. So, that’s the end.
The second example works because the data is returned immediately from the factory. The view renders with the data and because the view has lots of data, there is somewhere to scroll to.
Look at the Github issue linked above. Andy lists some options for remembering scroll position. Once the data is returned from the service, you can tell the view to scroll to the last remembered position.
I’m just back from a few days off; so, I’m a bit behind and haven’t tested anything.
I am facing the same issue - I click on a list item and go to it’s detail page and then I click on back the state of the list has changed (my search term in the input is removed). I already cache the data in $resource so it does not hit the data again, but I will need to store are reapply the state of the Search Term, which should be easy enough.
A service would help you out here, as they are singletons only one will ever exist. You could get your service tobdecided whenbto go and get the data. As well as this you could put your scroll position into the service.
Doing this would mean that the number of times your controller is created and destroyed should not effect the user moving around your app, don’t forget you’ll also need some kind of reset function too.
1 Like
Great, thanks, that worked well (I have tried an example using the $RootScope and 1 using a Service - the Service is cleaner IMO