angularjs - tabset - ui-router angular que mantiene el estado entre pestañas

plunker angularjs editor

Question

Me gustaría saber la mejor manera de preservar el estado entre pestañas. Yo uso pestañas bootstrap y ui-router angular. Tengo un mapa de Google en una de las pestañas y no quiero volver a cargar el mapa cuando el usuario selecciona esa pestaña. Por favor avise.

Gracias

Answer 1

Creo que lo que está buscando se trata en este número: https://github.com/angular-ui/ui-router/issues/63

En su mayoría están discutiendo iframes, pero creo que lo mismo debería ser válido para Google Maps. Desafortunadamente en el hilo decidieron que esto no es algo que debería implementarse en la versión principal. No he probado la directiva que brindan (si tengo la oportunidad, les contaré cómo funciona), pero es posible que puedan obtener algo que funcione con eso.

De hecho, me he encontrado con el problema exacto que tenías. Mi solución fue usar botones con estilo como mis pestañas y ng-show para la pestaña del mapa:

<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 simplemente usa display: none para ocultar el mapa y por lo tanto no causa una actualización. Tendrá que activar el mapa para que se cargue la primera vez que no esté oculto, de lo contrario se procesará incorrectamente, por loadMap() tanto loadMap()

Si tengo la oportunidad, estableceré un jsfiddle de esto en la práctica.