कोणीय जेएस + बूटस्ट्रैप सक्रिय टैब

Question

याद रखें मैंने बूटस्ट्रैप निर्देश का उपयोग करने वाला एक सरल AngularJS ऐप विकसित किया है। मेरे कई पेज टैब का उपयोग करते हैं। समस्या यह है कि, जब एक टैब में (पहले के अलावा) होता है और एक लिंक दबाता है जो किसी अन्य दृश्य की ओर जाता है और उस दृश्य से वापस (ब्राउज़र या एप्लिकेशन में बैक बटन) जाता है, तो पहले सक्रिय टैब अब सक्रिय नहीं है ।

मुझे लगता है कि कोणीय किसी भी तरह से पिछले पृष्ठों का ट्रैक रखने के लिए पुशस्टेट या ऐसा कुछ उपयोग करता है, क्योंकि ऐप के भीतर नेविगेट करते समय window.history की लंबाई संपत्ति बढ़ जाती है। क्या मैं किसी भी तरह राज्य में अतिरिक्त डेटा संलग्न कर सकता हूं जिसमें सक्रिय टैब के बारे में जानकारी है?

मैंने URL पर एक टैब पैरामीटर जोड़ने के लिए pushState का उपयोग करने का प्रयास किया है। पहली बार पुशस्टेट कहा जाता है कि यह ठीक काम करता है। हालांकि, दूसरी बार कोणीय किसी प्रकार के पाश में जाता है जिससे पृष्ठ क्रैश हो जाता है (अंत में)। मुझे इसे कैसे कार्यान्वित करना चाहिए?

Answer 1

कई समाधान का एक संयोजन को देखने के बाद (यहाँ से सहायता: http://bit.ly/1qIemCh) और एक काम कर समाधान करने के लिए इसे नीचे संघनित होती है, यह एक है कि मेरे लिए AngularJS + Bootstrap Tabs अनुमति दी थी। यह चाल जेएस में इतिहास से यूआरएल हैश को पकड़ने के लिए HTML5 pushstate का लाभ उठाने के लिए है, लागू टैब ढूंढें, और इसे दिखाएं।

टैब्स:

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