Как активировать вкладку Угловой Bootstrap UI после смены маршрута

Question

Я использовал компонент табуляции в Angular Bootstrap UI и ui-router для маршрутизации в моем приложении Angularjs.

Теперь я хочу активировать одну из вкладок после маршрута изменения. На самом деле у меня есть маршрут поиска, и я хочу изменить вкладки из-за параметров поиска (чтобы пользователи могли выбирать, где они хотят искать).

Answer 1

Я решил свою проблему!

Если у каждой вкладки есть эксклюзивный маршрут, мы можем использовать 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 изменение класса активной вкладки типа