5

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

window.historyアプリ内を移動するときに length プロパティが増加するため、Angular は何らかの形で pushState などを使用して前のページを追跡していると思います。アクティブなタブに関する情報を含む状態に、どうにかして余分なデータを添付できますか?

pushState を使用して、タブ パラメーターを URL に追加しようとしました。初めて pushState が呼び出され、正常に動作します。ただし、2 回目に Angular がなんらかのループに入り、(最終的に) ページがクラッシュします。これをどのように実装すればよいですか？

4

1 に答える 1

2

いくつかのソリューションの組み合わせを見て（ここから支援：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-09T02:46:19.843 に答える