AngularJS + Bootstrap etkin sekmeyi hatırla

Question

Bootstrap yönergesini kullanan basit bir AngularJS uygulaması geliştirdim. Birkaç sayfam sekmeler kullanıyor. Sorun şu ki, bir sekmede (ilkinden farklı) olduğunda ve başka bir görünüme giden ve bu görünümden geriye (tarayıcıda veya uygulamada geri düğmesi) giden bir bağlantıya bastığınızda, daha önce etkin olan sekme artık etkin değil .

Anımsatıcı, uygulamada gezinirken window.history'un uzunluk özelliği arttığından, bir şekilde önceki sayfaların kaydını tutmak için pushState veya benzeri bir şey kullandığımı tahmin ediyorum. Aktif sekmeyle ilgili bilgileri içeren duruma fazladan veri ekleyebilir miyim?

URL'ye bir sekme parametresi eklemek için pushState kullanmayı denedim. İlk kez pushState denir, iyi çalışır. Ancak, ikinci kez Açısal, sayfanın çökmesine (nihayetinde) neden olan bir çeşit döngüye girer. Bunu nasıl uygulamalıyım?

Answer 1

birkaç çözümlerin bir kombinasyonu baktıktan sonra (buradan yardım: http://bit.ly/1qIemCh) ve çalışan bir çözüme aşağı yoğuşmalı, bu benim için AngularJS + Bootstrap Tabs izin biriydi. Buradaki hile, JS'deki geçmişten gelen URL karmaşasını almak, ilgili sekmeyi bulmak ve göstermek için HTML5 pushstate'dan yararlanmaktır.

Sekmeler:

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

Bu JS geçmişinden veya bir yer işareti üzerinden de navigasyon ediliyor takdirde doğru sekmesini devreye sokar:

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