AngularJS + Bootstrap 记住活动标签答案

【问题标题】：AngularJS + Bootstrap remember active tabAngularJS + Bootstrap 记住活动标签
【发布时间】：2013-10-25 09:46:02
【问题描述】：

我开发了一个使用 Bootstrap 指令的简单 AngularJS 应用程序。我的几个页面使用标签。问题是，当我在一个选项卡中（第一个选项卡除外）并按下指向另一个视图的链接并从该视图返回（浏览器或应用程序中的后退按钮）时，先前活动的选项卡不再处于活动状态.

我猜 Angular 以某种方式使用 pushState 或类似的东西来跟踪以前的页面，因为当我在应用程序中导航时，window.history 的长度属性会增加。我能否以某种方式将额外数据附加到包含有关活动选项卡信息的状态？

我尝试使用 pushState 将选项卡参数附加到 URL。第一次调用 pushState 它工作正常。然而，Angular 第二次进入某种循环导致页面崩溃（最终）。我应该如何实现这个？

【问题讨论】：

标签： javascript angularjs twitter-bootstrap

【解决方案1】：

在查看了几种解决方案的组合（从这里获得帮助：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();
});

【讨论】：