[英]AngularJS + Bootstrap remember active tab
我开发了一个使用Bootstrap指令的简单AngularJS应用程序。 我的几个页面都使用了标签。 问题是,当我在一个标签(不是第一个)中按下一个链接导致另一个视图并从该视图返回(浏览器或应用程序中的后退按钮)时,之前活动的标签不再是活动标签了。
我猜Angular以某种方式使用pushState或类似的东西来跟踪前面的页面,因为当我在应用程序中导航时, window.history
的length属性会增加。 我可以以某种方式将额外数据附加到包含有效选项卡信息的状态吗?
我已经尝试使用pushState将一个tab参数附加到URL。 第一次调用pushState它工作正常。 然而,第二次Angular进入某种循环导致页面崩溃(最终)。 我应该如何实现这个?
在查看了几个解决方案的组合(从这里得到帮助: http : //bit.ly/1qIemCh )并将其缩小为工作解决方案之后,这就是允许我使用AngularJS
+ Bootstrap Tabs
解决方案。 诀窍是利用HTML5 pushstate
从JS中的历史记录中获取URL哈希,找到适用的选项卡并显示它。
标签:
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li class="active"><a href="#" data-target="#">Home</a></li>
<li><a href="#/tab2" data-target="#">Tab 2</a></li>
<li><a href="#/tab3" data-target="#">Tab 3</a></li>
</ul>
这个JS
将从历史记录中激活正确的选项卡,或者通过书签进行导航:
function setActiveTab() {
var hash = window.location.hash;
var activeTab = $('.nav-tabs a[href="' + hash + '"]');
if (activeTab.length) {
activeTab.tab('show');
} else {
$('.nav-tabs a:first').tab('show');
}
};
//If a bookmark was used to a particular page, make sure to
//activate the correct tab after initial load:
$(document).ready(function() {
setActiveTab();
});
//When history.pushState() activates the popstate event, switch to the currently
//selected tab aligning with the page being navigated to from history.
$(window).on('popstate', function () {
setActiveTab();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.