Preserving view when routed to another view/controller?

[xeoncross]

1. I have a route (/map) that renders a google map with a lot of item excerpts. It takes a few seconds for the map to load and render the smaller marker set and additional data items.
2. Clicking the data items routes you to another page (/item/{id}) which dumps the first view/controller and loads up the details page so you can see more information.
3. Clicking back returns to /map and rebuilds the entire map taking several more seconds before the process is repeated (goto step 2).

With complex graphs or maps (which link to real detail pages) how do you preserve the actual DOM elements when changing pages? What is the recommended way to solve this problem?

Using a parent controller and an ng-if/ng-show might work for a single page app, but what about an $locationProvider.html5Mode(true); where the individual pages could start without having parent controllers loaded with the data choices?

[rickj33]

I am facing a similar issue trying to preserve the dom elements.
Where you able to find a workaround for this?

[xeoncross]

Ionic was able to do this (and improve performance) using their own views and angular-ui-router.

http://ionicframework.com/docs/api/directive/ionView/

Views are cached to improve performance. When a view is navigated away from, its element is left in the DOM, and its scope is disconnected from the $watch cycle. When navigating to a view that is already cached, its scope is reconnected, and the existing element, which was left in the DOM, becomes active again. This can be disabled, or the maximum number of cached views changed in $ionicConfigProvider, in the view's $state configuration, or as an attribute on the view itself (see below).

[nateabele]

With complex graphs or maps (which link to real detail pages) how do you preserve the actual DOM elements when changing pages?

Unfortunately, right now we don't.

What is the recommended way to solve this problem?

This is definitely an important issue, right now we just don't have the bandwidth to address it. It'd be great to get some activity from the Ionic folks to push something like that back into UI-Router.

[FDIM]

Hi there,
I had some spare time at work and decided to investigate this issue. I looked at ionic, but from the looks of it - it seems that it's all or nothing solution. E.g. their view depends/is linked to the top bar.

Other than that I found ui router extras: https://github.com/christopherthielen/ui-router-extras , sticky module in particular - but it doesn't work for my case. I don't have multiple views/tabs nor I want to create them just to make use of library. I just want to show same view/content user saw before going into to details state.

Having said that, I began coding new solution. It can be seen here: master...FDIM:persistent-view#diff-1 . I admit that changes I made in codebase are not of highest quality, caching should be probably moved to its own service but first I'd like to find solution that works and makes sense.

It only works for non-nested views though and changes to state params needs to be handled manually via event '$viewRestored'. It's questionable whether state params should have any effect, and whether scope should be unlinked from parent. At the moment scope is not unlinked, but DOM element is detached. These 2 are most likely a target for app wide configuration.

In the sample, contacts list and home are persistent/cached/reusable and seems to work nicely. Home state subscribes to '$viewRestored' and '$viewCached' events to do some extra work. For example, reopening state after 10 seconds will show different heading and invalidate cache, thus next time fresh version will shown.

Would someone mind to take a look and provide 2nd set of eyes? I really feel that something like this should be part of the 'core' ,and not an addon.

EDIT: In one of the projects I am working on this integrates quite nicely :) Still have to deal with scroll position, but that's another issue.

[nateabele]

We're pretty swamped with 1.0 prep, but something like this would be great to have. I'll put it on my list. If someone else beats me to it, that's fine.

[SilvaCoder]

I found a poor workarround, but its fast enough to save your time until you get a better way to do it.

In Index.html :

BODY-

    <div ng-controller="mapsCtrl" ng-show="show">
        <div data-tap-disabled="true" ng-if="true">
            <ui-gmap-google-map center='map.center' zoom='map.zoom'>
                <ui-gmap-marker ng-repeat="m in map.markers" click="mostrarDetalhes(m)" coords="m.coords" icon="m.icon" idkey="m.id"></ui-gmap-marker>
            </ui-gmap-google-map>
        </div>
    </div>

    <ui-view style="margin-top: 100px;">
            **HERE GOES THE ACTUAL ROUTE VIEW**
    </ui-view>

    <div ng-include src="'templates/footer.html'"></div>

-BODY


All im doing here is puting the ui-gmap-google-map directive in index.html, so i will never reload, and you control it (like showing or not) in the controller of your preference. For showing (or not) the map, im using events like : $rootScope.$broadcast('showMap') and $rootScope.$broadcast('hidemap') inside my angular.module('app', []).run. So in the maps controller i handle that ( $rootScope.$on('showMap', function(){$scope.show = true}) / $rootScope.$on('hideMap', function(){$scope.show = false;}) ).

On the way developing i know i'll find a better way, but for now it saves me using any other library, or branches/forks from github.

Hope it helps (momently) someone.

[graphefruit]

Any news on this issue? This would be one of the best features ever. The caching and restoring a complete state like ionic showed in version 1 or version 2 helps a lot especially on fast navigation.
The problem that most pages needs to get data from a service / API and users can scroll through the output.
Restoring the scrolling area and caching the data is very tricky and results in bad performance.
Thanks in advance for your feedback
Grapefruit

[PascalAOMS]

One year later — any info?

[Taytay884]

I would like to hear if someone have a good solution... =,[

[christopherthielen]

https://github.com/ui-router/sticky-states