All geek questions in one place

Angular ui-router state saving between tabs

I would like to know how best to maintain state between tabs. I use the boot tabs and angular ui-router. I have a google map on one of the tabs and don’t want to reload the map when the user selects this tab. Please inform.

thanks

+6
source share
1 answer

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

They mostly discuss iframes, but I believe the same should be the case for Google Maps. Unfortunately, in the stream, they decided that this is not what should be implemented in the main version. I have not tried the directive they provide (if I get a chance, I'll let you know how this happens), but you can get something with this.

I really ran into the exact problem you had. My solution was to use stylized buttons as tabs and ng-show for map tabs:

<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 card and therefore does not cause an update. You will need to cause the map to load for the first time when it is not hidden, otherwise it will not display correctly, therefore loadMap()

If I have a chance, I will create jsfiddle in practice.

+1
source

Source: https://habr.com/ru/post/959034/

More articles:


All Articles