AngularJS + Bootstrap記得活動標簽

Question

我開發了一個使用Bootstrap指令的簡單AngularJS應用程序。 我的幾個頁面都使用了標簽。 問題是，當我在一個標簽（不是第一個）中按下一個鏈接導致另一個視圖並從該視圖返回（瀏覽器或應用程序中的后退按鈕）時，之前活動的標簽不再是活動標簽了。

我猜Angular以某種方式使用pushState或類似的東西來跟蹤前面的頁面，因為當我在應用程序中導航時， window.history的length屬性會增加。 我可以以某種方式將額外數據附加到包含有效選項卡信息的狀態嗎？

我已經嘗試使用pushState將一個tab參數附加到URL。 第一次調用pushState它工作正常。 然而，第二次Angular進入某種循環導致頁面崩潰（最終）。 我應該如何實現這個？

Answer 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();
});