Comment afficher un menu de navigation avec AngularJS qui change la classe 'active' en fonction de la route visualisée ?

Question

Je veux simplement afficher un menu de navigation comme celui qui suit dans mon application :

<ul>
  <li><a href="#/section1">Section 1</a></li>

  <li class="active"><a href="#/section2">Section 2</a></li>

  <li><a href="#/section3">Section 3</a></li>
</ul>

Ici, un clic sur le tronçon 1, le tronçon 2 ou le tronçon 3 déclenchera un changement d'itinéraire. Actuellement, le <li> pour la section 2 a la classe active ce qui signifie qu'il s'agit de l'itinéraire actuellement actif. Je veux simplement déplacer cette classe, par exemple si l'on clique sur la section 3, je veux que la classe li pour que la section 3 ait la active classe.

Quelle est la meilleure façon d'y parvenir ?

Answer 1

Vous pouvez écouter l'événement $routeChangeSuccess (voir la documentation pour $route ) pour détecter les changements.

Reformatez votre contrôleur et html comme ceci :

$scope.navList = [
  { url: '/route1', title: 'Route 1'},
  { url: '/route2', title: 'Route 2'},
  { url: '/route3', title: 'Route 3'}
];

<ul>
  <li ng-repeat="item in navList">
    <a ng-class="{active:item.active}" href="#{{item.url}}">{{item.title}}</a>
  </li>
</ul>

Puis écoutez les changements (dans votre contrôleur) :

function detectRoute() {
  angular.forEach($scope.navList, function(item) {
    item.active = $location.path().match(new RegExp(item.url)) ? true : false;
  });  
}

$scope.$on('$routeChangeSuccess', detectRoute);

Voir l'exemple dans Plongeur .

J'ai regroupé tout cela dans un module : https://github.com/Espesen/angular-simple-navbar

Answer 2

Fonction du contrôleur :

...
$scope.isActive = function (viewLocation) {
  return viewLocation === $location.path();
};
...

Answer 3

J'ai obtenu ce résultat en utilisant bootstrap, cela pourrait vous aider.

$('ul.nav > li').click(function (e) {
        e.preventDefault();
        $('ul.nav > li').removeClass('active');
        $(this).addClass('active');                
    });

Le violon de travail est aquí