AngularJS + Bootstrap nhớ tab hoạt động

Question

Tôi đã phát triển một ứng dụng AngularJS đơn giản sử dụng chỉ thị Bootstrap. Một số trang của tôi sử dụng các tab. Vấn đề là, khi im trong một tab (không phải tab đầu tiên) và nhấn một liên kết dẫn đến chế độ xem khác và quay lại (nút quay lại trong trình duyệt hoặc ứng dụng) từ chế độ xem đó, tab hoạt động trước đó không còn hoạt động nữa .

Tôi đoán rằng Angular bằng cách nào đó sử dụng pushState hoặc một cái gì đó như thế để theo dõi các trang trước, vì thuộc tính độ dài của window.history được tăng lên khi im điều hướng trong ứng dụng. Có thể tôi bằng cách nào đó đính kèm dữ liệu bổ sung cho tiểu bang có chứa thông tin về các tab hoạt động?

Tôi đã thử sử dụng pushState để nối tham số tab vào URL. Lần đầu tiên pushState được gọi là nó hoạt động tốt. Tuy nhiên, lần thứ hai Angular đi vào một số loại vòng lặp gây ra các trang để sụp đổ (cuối cùng). Làm thế nào tôi nên thực hiện điều này?

Answer 1

Sau khi xem xét kết hợp một số giải pháp (trợ giúp tại đây: http://bit.ly/1qIemCh) và ngưng tụ nó xuống một giải pháp làm việc, đây là giải pháp cho phép AngularJS + Bootstrap Tabs cho tôi. Bí quyết là tận dụng số HTML5 pushstate để lấy hàm băm URL từ lịch sử trong JS, tìm tab thích hợp và hiển thị nó.

Tabs:

<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 này sẽ kích hoạt các tab phù hợp từ lịch sử hoặc nếu được lèo lái quá qua một bookmark:

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