AngularJS +引导记得活动标签 [英] AngularJS + Bootstrap remember active tab

问题描述

我已经开发了一个简单的AngularJS应用程序，利用引导指令。我的几个页面使用选项卡。问题是，当IM的标签（比第一个除外）及presses，导致另外的看法，回去（后退按钮在浏览器或应用程序）从该视图中，previously活动标签的链接不是活动了。

I've developed a simple AngularJS app that utilizes the Bootstrap directive. Several of my pages uses tabs. The problem is, when im in a tab (other than the first one) and presses a link that leads to another view and go back (back button in browser or application) from that view, the previously active tab isn't the active anymore.

我想这在某种程度上角使用pushState的或类似的东西来跟踪previous页面，因为的window.history 的长度属性时，即时通讯增加在应用程序中进行导航。我能以某种额外的数据附加到其中包含有关活动标签信息的状态？

I guess that Angular somehow uses pushState or something like that to keep track of the previous pages, since the length property of window.history is increased when im navigating within the app. Could i somehow attach extra data to the state which contains information about the active tab?

我已经使用pushState的追加到URL中的标签参数尝试。第一次pushState的调用它工作正常。然而，在第二时间角进入某种循环导致网页崩溃（最终）。我应该怎么实现这一点？

I've tried using pushState to append a tab parameter to the URL. First time pushState is called it works fine. However, the second time Angular goes into some kind of loop causing the page to crash (eventually). How should i implement this?

推荐答案

看着几种解决方案的组合后（帮助从这里：的 http://bit.ly/1qIemCh ）和冷凝下来到工作的解决方案，这是允许有一个 AngularJS + 引导标签我。关键是要利用 HTML5 pushState的来抓住从历史JS的URL散列，找到相应的选项卡，并显示。

After looking at a combination of several solutions (assist from here: http://bit.ly/1qIemCh) and condensing it down to a working solution, this was the one that allowed AngularJS + Bootstrap Tabs for me. The trick is to leverage the HTML5 pushstate to grab the URL hash from history in JS, find the applicable tab, and show it.

标签：

<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 将历史或通过书签也被导航激活正确的标签：

This JS will activate the proper tab from history or if being navigated too via a 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();
});

这篇关于AngularJS +引导记得活动标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！