AngularJS + Bootstrap 활성 탭 기억

저는 Bootstrap 지시어를 사용하는 간단한 AngularJS 앱을 개발했습니다. 내 페이지 중 일부는 탭을 사용합니다. 문제는 첫 번째 탭 이외의 다른 탭에서 다른보기로 연결되는 링크를 누르면 해당보기에서 (브라우저 또는 응용 프로그램의 뒤로 버튼) 이전에 활성 탭이 더 이상 활성 상태가 아닌 것입니다 .AngularJS + Bootstrap 활성 탭 기억

Angular는 앱 내에서 탐색 할 때 길이 속성 window.history이 증가하기 때문에 어떻게 든 이전 페이지를 추적하기 위해 pushState 또는 그와 비슷한 것을 사용한다고 생각합니다. 활성 탭에 대한 정보가 들어있는 상태에 어떻게 든 추가 데이터를 첨부 할 수 있습니까?

URL에 탭 매개 변수를 추가하기 위해 pushState를 사용해 보았습니다. 처음에는 pushState가 제대로 작동한다고합니다. 그러나 Angular는 두 번째로 루프가 발생하여 페이지가 충돌합니다 (결국). 어떻게 구현해야합니까?

출처

2013-10-25 Anton Gildebrand

몇 가지 솔루션 (여기에서 지원 : 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-09 02:46:19 atconway

AngularJS + Bootstrap 활성 탭 기억

답변

관련 문제