angular ui-router maintaining state between tabs

Question

Would like to know the best way to preserve state between tabs. I use bootstrap tabs and angular ui-router. I've a google map in one of the tabs and don't want to reload the map when user selects that tab. Please advise.

Thanks

Answer 1

I think what you are looking for is discussed in this issue: https://github.com/angular-ui/ui-router/issues/63

They are mostly discussing iframes but I believe the same should hold for Google Maps. Unfortunately in the thread they decided that this isn't something that should be implemented in the core release. I haven't tried out the directive they provide (if I get a chance I'll let you know how it goes) but you may be able to get something working with that.

I have actually come across the exact problem you had. My solution was to use styled buttons as my tabs and ng-show for the map tab:

<div id="info-btns">
  <button class="btn" ng-model="view" btn-radio="'info'">
    Info
  </button>
  <button class="btn" ng-model="view" btn-radio="'map'" ng-click="loadMap()">
    Map
  </button>
</div>


<div class="content" ng-show="view != map">
  <div ui-view="info"></div>
</div>

<div id="map-container" ng-show="view == 'map'">
  <div id="map" class="content" sitemap>
  </div>
</div>

ng-show simply uses display:none to hide the map and hence doesn't cause a refresh. You will need to trigger the map to load the first time it is not hidden otherwise it will render incorrectly, hence loadMap()

If I get a chance I'll set up a jsfiddle of this in practice.