I am currently working on creating a menu with dropdown functionality for multiple links within my application.
My goal is to have the dropdown menu display as "active" when one of the links below is active.
I have managed to make either the link in the dropdown or the dropdown itself appear as active, but I can't seem to get them both functioning simultaneously. Only one of them works at a time.
If anyone could review the following code and point out where I may be going wrong, it would be greatly appreciated!
<li class="dropdown" ui-sref-active-eq="active">
<a class="dropdown-toggle" data-toggle="dropdown">
Main
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li ui-sref-active="active">
<a ui-sref="Debut1">
Items
</a>
</li>
</ul>
</li>
EDIT
To see the problem in action, please refer to this Plunker https://plnkr.co/edit/Ffe9FLz4TuihkVjby6RU
ANSWER
app.js
var app = angular.module('app', [
'ui.router'
]);
app.config([
'$stateProvider',
'$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
var accueil = {
name: 'accueil',
url: '/Accueil',
templateUrl: '/app/views/accueil/accueil.html'
}
var debutant = {
name: 'debut',
url: '/Debut',
abstract: true,
templateUrl: '/app/views/debut/debut.html'
}
var debutant1 = {
name: 'debut.one',
url: '/One',
parent: debutant,
templateUrl: '/app/views/debut/debut1.html'
}
var debutant2 = {
name: 'debut.two',
url: '/Two',
parent: debutant,
templateUrl: '/app/views/debut/debut2.html'
}
$stateProvider.state(accueil);
$stateProvider.state(debutant);
$stateProvider.state(debutant1);
$stateProvider.state(debutant2);
$urlRouterProvider.otherwise('/Accueil');
}
]);
index.html
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li ui-sref-active="active">
<a ui-sref="accueil">
Accueil
</a>
</li>
<li class="dropdown" ui-sref="debut" ui-sref-active="active">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Début
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li ui-sref-active="active">
<a ui-sref="debut.one">
Début 1
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="debut.two">
Début 2
</a>
</li>
</ul>
</li>
</ul>
</div>
debut.html
<div ui-view></div>