AngularJS + Bootstrap記住活動標籤

我開發了一個使用Bootstrap指令的簡單AngularJS應用程序。我的幾個網頁使用標籤。問題是，如果在選項卡（除第一個選項卡以外）中選擇im並按下導致另一個視圖的鏈接並從該視圖返回（在瀏覽器或應用程序中返回按鈕），則以前的活動選項卡不再是活動的。AngularJS + Bootstrap記住活動標籤

我想Angular以某種方式使用pushState或類似的東西來跟蹤前面的頁面，因爲當在應用內導航時，增加了window.history的長度屬性。我可以以某種方式將附加數據附加到包含有關活動選項卡信息的狀態嗎？

我試過使用pushState來追加一個標籤參數到URL。第一次pushState被稱爲它工作正常。然而，第二次Angular進入某種循環導致頁面崩潰（最終）。我應該如何實現這一點？

來源

2013-10-25 Anton Gildebrand

看着幾個方案的組合之後（從這裏幫助：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(); 
});

來源

2014-09-09 02:46:19 atconway

AngularJS + Bootstrap記住活動標籤

回答

相關問題