My goal is to have the first view based on some sub-views while the main view remains abstract and only redirects to the first sub-view. I have implemented two nav bars for navigation - one for normal views and another specifically for navigating within the home sub-views. However, I am unsure how to set up the main navbar so that it is active when any of the home sub-views are active.
Below is the code for the top bar navbar. I want the Home button to be active when any of the sub-views of home (home.a, home.b) are active. Currently, the Home button always remains inactive.
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="home">Home</a></li> //I can use home.a here, but once I navigate to home.b, it becomes inactive
<li ui-sref-active="active"><a ui-sref="about">About</a></li>
<li ui-sref-active="active"><a ui-sref="contact">Contact</a></li>
</ul>
The sub-views navbar works correctly as the correct button is active when I am on a specific sub-view.
<ul class="nav nav-pills nav-stacked">
<li ui-sref-active="active"><a ui-sref="home.a">Common</a></li>
<li ui-sref-active="active"><a ui-sref="home.b">My</a></li>
</ul>
Currently, my setup allows the main navbar to be selected when the sub-views are active. However, if I change the main view to "contact," I cannot go back to the home because it is an abstract view:
.state('home', {
abstract: true,
templateUrl: 'app/main/main.html',
controller: 'MainController',
controllerAs: 'ctrl'
})
.state('home.a', {
url: '/',
templateUrl: 'app/main/a/a.html',
controller: 'AController',
controllerAs: 'ctrl'
})
.state('home.b', {
url: '/',
templateUrl: 'app/main/b/b.html',
controller: 'BController',
controllerAs: 'ctrl'
})
.state('contact', {
url: '/contact',
templateUrl: 'app/contact/contact.html',
controller: 'ContactController',
controllerAs: 'ctrl'
})