更改路由后如何在 Angular Bootstrap UI 中激活选项卡答案

【问题标题】：How to active tab in Angular Bootstrap UI after change route更改路由后如何在 Angular Bootstrap UI 中激活选项卡
【发布时间】：2016-09-06 09:43:29
【问题描述】：

我在Angular Bootstrap UI 和ui-router 中使用tab 组件 在我的Angularjs 应用程序中进行路由。

现在我想在更改路线后激活其中一个选项卡。事实上，我有一条搜索路线，并且由于 搜索选项（用户可以选择他们想要搜索的位置）来更改标签。

【问题讨论】：

使用$stateParams 来获取传递的参数。并根据需要在路由中定义参数url: '/entity/list?param1&param2。

标签： angularjs angular-ui-router angular-ui-bootstrap angular-ui-bootstrap-tab

【解决方案1】：

我解决了我的问题！

如果每个tab都有专属路由，我们可以使用angular ui router sticky来处理。

使用引导程序

users.pug

ul.nav.nav-tabs

    li.nav-item(ui-sref-active-eq='active')
       a.nav-link(ui-sref="users") users list

    li.nav-item(ui-sref-active-eq='active')
       a.nav-link(ui-sref="users.newUser") newUser

.tab-content(ui-view="usersTab")

usersList.pug

h1 users list page

newuser.pug

h1 new user page

route.js

.state('users', {
    url: '/users',
    templateUrl: 'users.html',
    controller: 'usersCtrl'
})
.state('usersList', {
    url: '/usersList',
    sticky: true,
    views: {
       "usersTab": {
           templateUrl: 'usersList.html',
           controller: 'usersListCtrl'
       }
    }
})
.state('newUser', {
    url: '/newUser',
    sticky: true,
    views: {
       "usersTab": {
           templateUrl: 'newUser.html',
           controller: 'newUserCtrl'    
       }
    }

})

要激活每个选项卡可以使用：ui-sref-active-eq='active' 和 .active 类更改活动选项卡样式

【讨论】：