AngularJS + Bootstrap记得活动标签

Question

我开发了一个使用Bootstrap指令的简单AngularJS应用程序.我的几个页面都使用了标签.问题是,当我在一个标签(不是第一个)中按下一个链接导致另一个视图并从该视图返回(浏览器或应用程序中的后退按钮)时,之前活动的标签不再是活动标签了.

我猜Angular以某种方式使用pushState或类似的东西来跟踪前面的页面,因为window.history当我在app中导航时,length属性会增加.我可以以某种方式将额外数据附加到包含有效选项卡信息的状态吗？

我已经尝试使用pushState将一个tab参数附加到URL.第一次调用pushState它工作正常.然而,第二次Angular进入某种循环导致页面崩溃(最终).我应该如何实现这个？

Answer 1

在查看了几种解决方案的组合（从此处提供帮助：http://bit.ly/1qIemCh）并将其浓缩为一个可行的解决方案之后，这就是允许我使用AngularJS+的解决方案。Bootstrap Tabs技巧是利用HTML5 pushstateJS 从历史记录中获取 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();
});