角度 ui-router 在选项卡之间保持状态 [英] angular ui-router maintaining state between tabs
问题描述
想知道在选项卡之间保持状态的最佳方法.我使用引导标签和角度 ui-router.我在其中一个选项卡中有一张谷歌地图,并且不想在用户选择该选项卡时重新加载地图.请指教.
谢谢
我认为您正在寻找的内容已在本期讨论:https://github.com/angular-ui/ui-router/issues/63
他们主要讨论 iframe,但我认为 Google 地图也应该如此.不幸的是,在线程中,他们认为这不应该在核心版本中实现.我还没有尝试过他们提供的指令(如果有机会,我会让你知道它是怎么回事),但你可能会得到一些与之相关的东西.
我实际上遇到了您遇到的确切问题.我的解决方案是使用样式按钮作为我的选项卡和地图选项卡的 ng-show:
<button class="btn" ng-model="view" btn-radio="'info'">信息按钮><button class="btn" ng-model="view" btn-radio="'map'" ng-click="loadMap()">地图按钮><div class="content" ng-show="view != map"><div ui-view="信息"></div>
<div id="map-container" ng-show="view == 'map'"><div id="map" class="content" 站点地图>
ng-show 只是使用 display:none 来隐藏地图,因此不会导致刷新.您将需要在第一次未隐藏时触发地图加载,否则将无法正确呈现,因此 loadMap()
如果有机会,我会在实践中设置一个 jsfiddle.
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
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.
这篇关于角度 ui-router 在选项卡之间保持状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!