Comment faire pour mettre en surbrillance un élément de menu actuel ?

Question

AngularJS aide-t-il en aucune façon avec réglage un `` classe sur le lien pour la page actuelle ?

J’imagine qu’il y a une façon magique pour cela, mais je n’arrive pas à trouver.

Mon menu ressemble à :

et j’ai des contrôleurs pour chacun d’eux dans mon parcours : et .

Mais je ne peux pas trouver un moyen de lier la classe « active » la `` des liens vers les contrôleurs.

Des conseils ?

Answer 1

à l’affiche

sur le contrôleur

Avec cela le lien tâches aura la classe active dans n’importe quelle url qui commence par ' / tâches » (p. ex. '/ tâches/1/rapports')

Answer 2

Je suggère d’utiliser une directive sur un lien. Ici est le violon.

Mais ce n’est pas parfait encore. Guettez le hashbangs  ;)

Voici le code javascript pour la directive :

et voici comment il pourrait être utilisé en html :

par la suite style avec css :

Answer 3

Voici une méthode simple qui fonctionne bien avec le moment cinétique.

Au sein de votre contrôleur de AngularJS :

Ce fil a un certain nombre d’autres réponses semblables.

Comment mettre en œuvre la classe active navbar bootstrap avec JS angulaire

Answer 4

Juste pour ajouter mon grain de sel dans le débat, j'ai fait un pur angulaire du module (sans jquery), et il fonctionne également avec de hachage des url contenant des données. (j'.g. #/this/is/path?this=is&some=data)

Il suffit d'ajouter le module en tant que dépendance et de l' auto-active à l'un des ancêtres du menu. Comme ceci:

<ul auto-active>
    <li><a href="#/">main</a></li>
    <li><a href="#/first">first</a></li>
    <li><a href="#/second">second</a></li>
    <li><a href="#/third">third</a></li>
</ul>

Et le module ressembler à ceci:

(function () {
    angular.module('autoActive', [])
        .directive('autoActive', ['$location', function ($location) {
        return {
            restrict: 'A',
            scope: false,
            link: function (scope, element) {
                function setActive() {
                    var path = $location.path();
                    if (path) {
                        angular.forEach(element.find('li'), function (li) {
                            var anchor = li.querySelector('a');
                            if (anchor.href.match('#' + path + '(?=\\?|$)')) {
                                angular.element(li).addClass('active');
                            } else {
                                angular.element(li).removeClass('active');
                            }
                        });
                    }
                }

                setActive();

                scope.$on('$locationChangeSuccess', setActive);
            }
        }
    }]);
}());

* (Vous pouvez bien sûr utiliser la directive cadre)

** Il est également intéressant de remarquer que cela ne fonctionne pas pour vider les hachages (j'.g. example.com/# ou juste example.com), il doit avoir au moins example.com/#/ ou juste example.com#/. Mais cela se fait automatiquement avec ngResource et la comme.

Et voici le violon: http://jsfiddle.net/gy2an/8/

Answer 5

Dans mon cas, j’ai résolu ce problème en créant un simple contrôleur responsable de la navigation

Et en ajoutant juste ng-classe à l’élément comme suit :