Question

我已在Angular Bootstrap UI和ui-router中使用标签组件在我的Angularjs应用中进行路由。

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

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类更改有效标签样式

如何在更改路径后激活Angular Bootstrap UI中的选项卡

1 个答案: