angularjs - Angular ui-router 维护选项卡之间的状态

Question

想知道在选项卡之间保留状态的最佳方法。我使用 Bootstrap 选项卡和 Angular ui-router。我在其中一个选项卡中有一个谷歌地图，并且不想在用户选择该选项卡时重新加载 map 。请指教。

谢谢

Answer 1

我认为本期讨论了您要查找的内容:https://github.com/angular-ui/ui-router/issues/63

他们主要在讨论 iframe，但我相信谷歌地图也应该如此。不幸的是，在线程中，他们认为这不应该在核心版本中实现。我还没有尝试过他们提供的指令(如果我有机会，我会告诉你它是怎么回事)，但你可能会得到一些与之相关的东西。

我实际上遇到了您遇到的确切问题。我的解决方案是使用样式按钮作为我的选项卡，使用 ng-show 作为 map 选项卡:

<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 只是使用 display:none 来隐藏 map ，因此不会导致刷新。您将需要在第一次未隐藏时触发 map 加载，否则将无法正确渲染，因此 loadMap()
如果我有机会，我会在实践中设置一个 jsfiddle。