AngularJS + Bootstrapはアクティブなタブを覚えています

Question

私はBootstrapディレクティブを利用した簡単なAngularJSアプリを開発しました。いくつかの私のページはタブを使います。問題は、タブ内の最初のタブ以外のもので、別のビューにつながるリンクを押してそのビューから戻ると（ブラウザまたはアプリケーションの戻るボタン）、以前アクティブなタブがもうアクティブではないということです。

Angularは、アプリ内をナビゲートすると、長さがwindow.historyというプロパティが増えているため、何らかの理由で前のページを追跡するためにpushStateなどを使用していると思います。アクティブなタブに関する情報が含まれている状態に何らかの追加データを添付することはできますか？

私は、URLにタブパラメータを追加するためにpushStateを使用しようとしました。初めてのpushStateはうまく動作します。しかし、2度目の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(); 
}); 

を