AngularJS + Bootstrap zapamięta aktywną kartę

Question

Opracowałem prostą aplikację AngularJS, która wykorzystuje dyrektywę Bootstrap. Kilka moich stron korzysta z kart. Problem polega na tym, że gdy jestem na karcie (innej niż pierwsza) i naciśnie link, który prowadzi do innego widoku i powraca (przycisk wstecz w przeglądarce lub aplikacji) z tego widoku, poprzednio aktywna karta nie jest już aktywna .

Domyślam się, że Angular w jakiś sposób używa pushState lub czegoś podobnego do śledzenia poprzednich stron, ponieważ właściwość length o numerze window.history jest zwiększana podczas nawigacji im w aplikacji. Czy w jakiś sposób mogę dołączyć dodatkowe dane do stanu zawierającego informacje o aktywnej karcie?

Próbowałem użyć parametru pushState, aby dodać parametr karty do adresu URL. Pierwszy raz nazywa się pushState, działa dobrze. Jednak po raz drugi Angular przechodzi w jakąś pętlę powodującą awarię strony (ostatecznie). Jak powinienem to wdrożyć?

Answer 1

Po patrząc na połączenie kilku rozwiązań (pomagać stąd: http://bit.ly/1qIemCh) i kondensacji go do roztworu roboczego, to był jeden, który pozwalał AngularJS + Bootstrap Tabs dla mnie. Sztuką jest wykorzystanie HTML5 pushstate do pobrania skrótu adresu URL z historii w JS, znalezienia odpowiedniej karty i wyświetlenia go.

Tabs:

<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> 

Ten JS aktywuje odpowiednią kartę z historii lub jeśli są zbyt nawigacja za pomocą zakładek:

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