如何在更改路徑后激活Angular Bootstrap UI中的選項卡

Question

我在Angular Bootstrap UI中使用了tab組件 ，在我的Angularjs應用程序中使用了ui-router進行路由。

現在我想在更改路線后激活其中一個標簽。 事實上，我有一個搜索路線，我想更改標簽，因為搜索選項 （用戶可以選擇他們想要搜索的位置）。

Answer 1

我解決了我的問題！

如果每個選項卡都有獨占路由，我們可以使用angular ui router sticky來處理這個問題。

使用bootstrap

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類更改活動選項卡樣式