角度ui-router维护标签之间的状态

时间:2013-11-29 09:58:45

标签: angularjs twitter-bootstrap angular-ui-router

想知道在标签之间保留状态的最佳方法。我使用bootstrap选项卡和角度ui-router。我在其中一个标签中有一个谷歌地图,当用户选择该标签时,不想重新加载地图。请指教。

由于

1 个答案:

答案 0 :(得分:1)

我认为您正在寻找的内容将在本期中讨论:https://github.com/angular-ui/ui-router/issues/63

他们主要讨论iframe,但我认为同样适用于Google地图。不幸的是,在线程中他们认为这不应该在核心版本中实现。我没有尝试过他们提供的指令(如果我有机会,我会告诉你它是怎么回事)但是你可能会得到一些有用的东西。

我实际上遇到了你遇到的确切问题。我的解决方案是使用样式按钮作为我的标签和ng-show用于地图选项卡:

<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来隐藏地图,因此不会导致刷新。您将需要在第一次未隐藏时触发地图加载,否则将无法正确渲染,因此loadMap()

如果我有机会,我会在实践中设置一个这样的方法。