AngularJS + Bootstrap erinnern aktive Registerkarte

Question

Ich habe eine einfache AngularJS App entwickelt, die die Bootstrap-Direktive verwendet. Einige meiner Seiten verwenden Tabulatoren. Das Problem ist, wenn in einem Tab (anders als die erste) und drückt einen Link, der zu einer anderen Ansicht führt und zurück (zurück Button in Browser oder Anwendung) von dieser Ansicht, die zuvor aktive Registerkarte ist nicht mehr aktiv .

Ich vermute, dass Angular irgendwie PushState oder etwas ähnliches verwendet, um die vorherigen Seiten zu verfolgen, da die Längeneigenschaft von window.history erhöht wird, wenn Navigieren innerhalb der App. Könnte ich irgendwie zusätzliche Daten an den Status anhängen, der Informationen über die aktive Registerkarte enthält?

Ich habe versucht, mithilfe von PushState einen Tab-Parameter an die URL anzuhängen. Das erste Mal, dass pushState aufgerufen wird, funktioniert es gut. Beim zweiten Mal geht Angular jedoch in eine Art Schleife über, die (schließlich) zum Absturz der Seite führt. Wie soll ich das umsetzen?

Answer 1

Nach bei einer Kombination mehrerer Lösungen suchen (Hilfs von hier: http://bit.ly/1qIemCh) und es bis zu einer Arbeitslösung Kondensieren, dies war derjenige, der AngularJS + Bootstrap Tabs für mich erlaubt. Der Trick besteht darin, die HTML5 pushstate zu nutzen, um den URL-Hash aus dem Verlauf in JS zu holen, den entsprechenden Tab zu finden und ihn anzuzeigen.

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> 

Diese JS wird die richtigen Registerkarte aus der Geschichte aktivieren oder zu über ein Lesezeichen navigiert werden:

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