Comment définir la classe active bootstrap _ navbar avec Angular JS?
Si j'ai une barre de navigation dans bootstrap avec les éléments
Home | About | Contact
Comment définir la classe active pour chaque élément de menu quand ils sont actifs? Autrement dit, comment puis-je définir class="active" lorsque la route angular est à
#/pour la maison#/aboutpour la page à propos#/contactpour la page de contact
Une méthode très élégante consiste à utiliser ng-controller pour exécuter un seul contrôleur en dehors de ng-view:
<div class="collapse navbar-collapse" ng-controller="HeaderController">
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/')}"><a href="/">Home</a></li>
<li ng-class="{ active: isActive('/dogs')}"><a href="/dogs">Dogs</a></li>
<li ng-class="{ active: isActive('/cats')}"><a href="/cats">Cats</a></li>
</ul>
</div>
<div ng-view></div>
et inclure dans controllers.js:
function HeaderController($scope, $location)
{
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
}
Je viens d’écrire une directive pour gérer cela, vous pouvez donc simplement ajouter l’attribut bs-active-link à l’élément parent <ul>, et chaque fois que la route changera, elle trouvera le lien correspondant et ajoutera le active classe à la <li> correspondante.
Vous pouvez le voir en action ici: http://jsfiddle.net/8mcedv3b/
Exemple HTML:
<ul class="nav navbar-nav" bs-active-link>
<li><a href="/home">Home</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
Javascript:
angular.module('appName')
.directive('bsActiveLink', ['$location', function ($location) {
return {
restrict: 'A', //use as attribute
replace: false,
link: function (scope, elem) {
//after the route has changed
scope.$on("$routeChangeSuccess", function () {
var hrefs = ['/#' + $location.path(),
'#' + $location.path(), //html5: false
$location.path()]; //html5: true
angular.forEach(elem.find('a'), function (a) {
a = angular.element(a);
if (-1 !== hrefs.indexOf(a.attr('href'))) {
a.parent().addClass('active');
} else {
a.parent().removeClass('active');
};
});
});
}
}
}]);
Vous pouvez consulter AngularStrap , la directive navbar semble être celle que vous recherchez:
https://github.com/mgcrea/angular-strap/blob/master/src/navbar/navbar.js
.directive('bsNavbar', function($location) {
'use strict';
return {
restrict: 'A',
link: function postLink(scope, element, attrs, controller) {
// Watch for the $location
scope.$watch(function() {
return $location.path();
}, function(newValue, oldValue) {
$('li[data-match-route]', element).each(function(k, li) {
var $li = angular.element(li),
// data('match-rout') does not work with dynamic attributes
pattern = $li.attr('data-match-route'),
regexp = new RegExp('^' + pattern + '$', ['i']);
if(regexp.test(newValue)) {
$li.addClass('active');
} else {
$li.removeClass('active');
}
});
});
}
};
});
Pour utiliser cette directive:
Téléchargez AngularStrap depuis http://mgcrea.github.io/angular-strap/
Incluez le script sur votre page après bootstrap.js:
<script src="lib/angular-strap.js"></script>Ajoutez les directives à votre module:
angular.module('myApp', ['$strap.directives'])Ajoutez la directive à votre barre de navigation:
<div class="navbar" bs-navbar>Ajouter des expressions rationnelles sur chaque élément de navigation:
<li data-match-route="/about"><a href="#/about">About</a></li>
Voici une approche simple qui fonctionne bien avec Angular.
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/View1') }"><a href="#/View1">View 1</a></li>
<li ng-class="{ active: isActive('/View2') }"><a href="#/View2">View 2</a></li>
<li ng-class="{ active: isActive('/View3') }"><a href="#/View3">View 3</a></li>
</ul>
Dans votre contrôleur AngularJS:
$scope.isActive = function (viewLocation) {
var active = (viewLocation === $location.path());
return active;
};
Si vous travaillez avec le routeur Angular, la directive directive RouterLinkActive peut être utilisée de manière très élégante:
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" routerLink="home" routerLinkActive="active">Home</a></li>
<li class="nav-item"><a class="nav-link" routerLink="gallery" routerLinkActive="active">Gallery</a></li>
<li class="nav-item"><a class="nav-link" routerLink="pricing" routerLinkActive="active">Prices</a></li>
<li class="nav-item"><a class="nav-link" routerLink="contact" routerLinkActive="active">Contact</a></li>
</ul>
D'abord et avant tout, ce problème peut être résolu de nombreuses manières. De cette façon, ce n’est peut-être pas le plus élégant, mais cela fonctionne parfaitement.
Voici une solution simple que vous devriez pouvoir ajouter à n’importe quel projet. Vous pouvez simplement ajouter un "pageKey" ou une autre propriété lorsque vous configurez votre itinéraire, que vous pouvez utiliser pour la désactiver. En outre, vous pouvez implémenter un écouteur sur la méthode $ routeChangeSuccess de l'objet $ route afin d'écouter l'achèvement réussi d'un changement d'itinéraire.
Lorsque votre gestionnaire se déclenche, vous obtenez la clé de page et vous utilisez cette clé pour localiser les éléments devant être "ACTIF" pour cette page, et vous appliquez la classe ACTIVE.
Gardez à l’esprit que vous avez besoin d’un moyen de rendre TOUS les éléments "ACTIF". Comme vous pouvez le voir, j'utilise la classe .pageKey sur mes éléments de navigation pour tous les désactiver, et j'utilise le .pageKey_ {PAGEKEY} pour les activer individuellement. Le passage de tous ces éléments à inactifs serait considéré comme une approche naïve. Si vous utilisiez l’itinéraire précédent pour rendre inactifs uniquement les éléments actifs, vous obtiendriez peut-être de meilleures performances. Vous pouvez également modifier le sélecteur JQuery pour ne sélectionner que les éléments actifs inactifs. Utiliser jQuery pour sélectionner tous les éléments actifs est probablement la meilleure solution car cela garantit que tout est nettoyé pour la route en cours en cas de bogues CSS susceptibles d'avoir été présents sur la route précédente.
Ce qui voudrait dire changer cette ligne de code:
$(".pagekey").toggleClass("active", false);
à celui-ci
$(".active").toggleClass("active", false);
Voici un exemple de code:
Étant donné une bootstrap _ barre de navigation de
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li><a href="#!/" class="pagekey pagekey_HOME">Home</a></li>
<li><a href="#!/page1/create" class="pagekey pagekey_CREATE">Page 1 Create</a></li>
<li><a href="#!/page1/edit/1" class="pagekey pagekey_EDIT">Page 1 Edit</a></li>
<li><a href="#!/page1/published/1" class="pagekey pagekey_PUBLISH">Page 1 Published</a></li>
</ul>
</div>
</div>
Et un module et contrôleur angular comme suit:
<script type="text/javascript">
function Ctrl($scope, $http, $routeParams, $location, $route) {
}
angular.module('BookingFormBuilder', []).
config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
template: 'I\'m on the home page',
controller: Ctrl,
pageKey: 'HOME' }).
when('/page1/create', {
template: 'I\'m on page 1 create',
controller: Ctrl,
pageKey: 'CREATE' }).
when('/page1/edit/:id', {
template: 'I\'m on page 1 edit {id}',
controller: Ctrl, pageKey: 'EDIT' }).
when('/page1/published/:id', {
template: 'I\'m on page 1 publish {id}',
controller: Ctrl, pageKey: 'PUBLISH' }).
otherwise({ redirectTo: '/' });
$locationProvider.hashPrefix("!");
}).run(function ($rootScope, $http, $route) {
$rootScope.$on("$routeChangeSuccess",
function (angularEvent,
currentRoute,
previousRoute) {
var pageKey = currentRoute.pageKey;
$(".pagekey").toggleClass("active", false);
$(".pagekey_" + pageKey).toggleClass("active", true);
});
});
</script>
Vous pouvez réellement utiliser la directive angular-ui-utils 'ui-route:
<a ui-route ng-href="/">Home</a>
<a ui-route ng-href="/about">About</a>
<a ui-route ng-href="/contact">Contact</a>
ou:
Contrôleur d'en-tête
/**
* Header controller
*/
angular.module('myApp')
.controller('HeaderCtrl', function ($scope) {
$scope.menuItems = [
{
name: 'Home',
url: '/',
title: 'Go to homepage.'
},
{
name: 'About',
url: '/about',
title: 'Learn about the project.'
},
{
name: 'Contact',
url: '/contact',
title: 'Contact us.'
}
];
});
Sommaire
<!-- index.html: -->
<div class="header" ng-controller="HeaderCtrl">
<ul class="nav navbar-nav navbar-right">
<li ui-route="{{menuItem.url}}" ng-class="{active: $uiRoute}"
ng-repeat="menuItem in menuItems">
<a ng-href="#{{menuItem.url}}" title="{{menuItem.title}}">
{{menuItem.name}}
</a>
</li>
</ul>
</div>
Si vous utilisez ui-utils, vous pouvez également être intéressé par ui-router pour la gestion des vues partielles/imbriquées.
Je trouve toutes ces réponses un peu trop compliquées pour moi, désolé. J'ai donc créé une petite directive qui devrait fonctionner par barre de navigation:
app.directive('activeLink', function () {
return {
link: function (scope, element, attrs) {
element.find('.nav a').on('click', function () {
angular.element(this)
.parent().siblings('.active')
.removeClass('active');
angular.element(this)
.parent()
.addClass('active');
});
}
};
});
Usage:
<ul class="nav navbar-nav navbar-right" active-link>
<li class="nav active"><a href="home">Home</a></li>
<li class="nav"><a href="foo">Foo</a></li>
<li class="nav"><a href="bar">Bar</a></li>
</ul>
J'utilise la directive ng-class avec $ location pour y parvenir.
<ul class="nav">
<li data-ng-class="{active: ($location.path() == '/') }">
<a href="#/">Carpeta Amarilla</a>
</li>
<li class="dropdown" data-ng-class="{active: ($location.path() == '/auditoria' || $location.path() == '/auditoria/todos') }">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Auditoria
<b class="caret"></b>
</a>
<ul class="dropdown-menu pull-right">
<li data-ng-class="{active: ($location.path() == '/auditoria') }">
<a href="#/auditoria">Por Legajo</a>
</li>
<li data-ng-class="{active: ($location.path() == '/auditoria/todos') }">
<a href="#/auditoria/todos">General</a>
</li>
</ul>
</li>
</ul>
La barre de navigation doit se trouver dans un contrôleur principal ayant accès au service $ location comme ceci:
bajasApp.controller('MenuCntl', ['$scope','$route', '$routeParams', '$location',
function MenuCntl($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
}]);
Si vous utilisez i-router , l'exemple suivant devrait répondre à vos besoins en fonction du commentaire de @DanPantry sur la réponse acceptée sans ajouter de code côté contrôleur:
<div class="collapse navbar-collapse" ng-controller="HeaderController">
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="app.home()" href="/">Home</a></li>
<li ui-sref-active="active"><a ui-sref="app.dogs()" href="/dogs">Dogs</a></li>
<li ui-sref-active="active"><a ui-sref="app.cats()" href="/cats">Cats</a></li>
</ul>
</div>
<div ng-view></div>
Vous pouvez consulter le docs pour plus d'informations à ce sujet.
Vous pouvez y parvenir avec une condition dans une expression angular, telle que:
<a href="#" class="{{ condition ? 'active' : '' }}">link</a>
Ceci étant dit, je trouve que la directive angular est la méthode la plus "appropriée", même si la sous-traitance d'une grande partie de cette mini-logique peut quelque peu polluer votre base de code.
J'utilise des éléments conditionnels pour le style graphique de temps en temps pendant le développement, car c'est un peu plus rapide que de créer des directives. Je ne saurais toutefois pas vous dire dans quel cas ils sont restés longtemps dans la base de code. À la fin, je le transforme en directive ou trouve un meilleur moyen de résoudre le problème.
Si vous préférez ne pas utiliser AngularStrap alors cette directive devrait faire l'affaire !. Ceci est une modification de https://stackoverflow.com/a/16231859/910764 .
JavaScript
angular.module('myApp').directive('bsNavbar', ['$location', function ($location) {
return {
restrict: 'A',
link: function postLink(scope, element) {
scope.$watch(function () {
return $location.path();
}, function (path) {
angular.forEach(element.children(), (function (li) {
var $li = angular.element(li),
regex = new RegExp('^' + $li.attr('data-match-route') + '$', 'i'),
isActive = regex.test(path);
$li.toggleClass('active', isActive);
}));
});
}
};
}]);
HTML
<ul class="nav navbar-nav" bs-navbar>
<li data-match-route="/home"><a href="#/home">Home</a></li>
<li data-match-route="/about"><a href="#/about">About</a></li>
</ul>
Remarque: Les classes HTML ci-dessus supposent que vous utilisez Bootstrap 3.x
Heres mon point de vue sur elle. Un peu d'une combinaison de réponses trouvées sur ce post. Mon cas étant légèrement différent, ma solution consiste donc à séparer le menu dans son propre modèle à utiliser dans la directive de définition, puis à ajouter ma barre de navigation à la page dont j'avais besoin. En gros, j'avais une page de connexion sur laquelle je ne voulais pas inclure mon menu, alors j'ai utilisé ngInclude et inséré cette directive lors de la connexion:
DIRECTIF:
module.directive('compModal', function(){
return {
restrict: 'E',
replace: true,
transclude: true,
scope: true,
templateUrl: 'templates/menu.html',
controller: function($scope, $element, $location){
$scope.isActive = function(viewLocation){
var active = false;
if(viewLocation === $location.path()){
active = true;
}
return active;
}
}
}
});
MODÈLE DE DIRECTIVE (templates/menu.html)
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/View1') }"><a href="#/View1">View 1</a></li>
<li ng-class="{ active: isActive('/View2') }"><a href="#/View2">View 2</a></li>
<li ng-class="{ active: isActive('/View3') }"><a href="#/View3">View 3</a></li>
</ul>
HTML QUI COMPREND LA DIRECTIVE
<comp-navbar/>
J'espère que cela t'aides
En prolongeant ma réponse, j'avais besoin de ça pour gérer une structure comme celle-ci.
-indice
-events <-active
---liste des événements
--- édition-événement
--- event-map <-cliqué
-des endroits
--- place-list
--- lieu-edit
--- carte-lieu
donc au lieu de faire correspondre, je devais utiliser indexOf, afin de valider les liens enfants formatés pour correspondre à la condition. Donc pour 'événements':
<li ng-class="{ active: isActive('/event')}" class="divider-vertical dropdown">
function NavController($scope, $location) {
$scope.isActive = function (viewLocation) {
var s=false;
if($location.path().indexOf(viewLocation) != -1){
s = true;
}
return s;
};}
C'est une solution simple
<ul class="nav navbar-nav navbar-right navbar-default menu">
<li ng-class="menuIndice == 1 ? 'active':''">
<a ng-click="menuIndice = 1" href="#/item1">item1</a>
</li>
<li ng-class="menuIndice == 2 ? 'active':''">
<a ng-click="menuIndice = 2" href="#/item2">item2</a>
</li>
<li ng-class="menuIndice == 3 ? 'active':''">
<a ng-click="menuIndice = 3" href="#/item3">item3</a>
</li>
</ul>
Merci à @ Pylinux . J'ai utilisé sa technique et l'ai également modifiée pour prendre en charge "un" niveau de menu déroulant (sub ul/li), car c'est ce dont j'avais besoin. Voir en action dans le lien violon ci-dessous.
Mise à jour du Fiddle sur la base de la réponse de pylinux - http://jsfiddle.net/abhatia/en4qxw6g/
J'ai apporté les trois modifications suivantes afin de prendre en charge le menu déroulant d'un niveau:
1. Ajout d'une valeur de classe de dd (liste déroulante) pour "un" élément sous li qui doit avoir une liste sub ul.
<li><a class="dd">This link points to #/fun5</a>
<ul>
<li><a href="#/fun6?some=data">This link points to #/fun6</a>
</li>
<li><a href="#/fun7?some=data">This link points to #/fun7</a>
</li>
<li><a href="#/fun8?some=data">This link points to #/fun8</a>
</li>
<li><a href="#/fun9?some=data">This link points to #/fun9</a>
</li>
</ul>
</li>
2. Javascript mis à jour pour ajouter la nouvelle logique suivante.
if(angular.element(li).parent().parent().children('a').hasClass("dd"))
{angular.element(li).parent().parent().children('a.dd').addClass('active');}
3. CSS mis à jour pour ajouter ce qui suit:
a.active {background-color:red;}
Espérons que cela sera utile à quelqu'un qui cherche à mettre en place un menu déroulant à un niveau.
En conjonction avec la réponse AngularStrap de @ Olivier, j'ai également implémenté la réponse de kevinknelson à partir de: https://github.com/twbs/bootstrap/issues/901 .
Nativement, la barre de navigation Bootstrap3 n’était pas conçue pour une application à une seule page (par exemple, Angular) et, par conséquent, le menu ne s’effondrait pas lorsque vous étiez sur un petit écran.
JavaScript
/**
* Main AngularJS Web Application
*/
var app = angular.module('yourWebApp', [
'ngRoute'
]);
/**
* Setup Main Menu
*/
app.controller('MainNavCtrl', [ '$scope', '$location', function ( $scope, $location) {
$scope.menuItems = [
{
name: 'Home',
url: '/home',
title: 'Welcome to our Website'
},
{
name: 'ABOUT',
url: '/about',
title: 'Know about our work culture'
},
{
name: 'CONTACT',
url: '/contact',
title: 'Get in touch with us'
}
];
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
}]);
HTML
<div class="navbar-collapse collapse" ng-controller="MainNavCtrl">
<ul id="add-magic-line" class="nav navbar-nav navbar-right">
<li data-ng-class="{current_page_item: isActive('{{ menuItem.url }}')}" data-ng-repeat="menuItem in menuItems">
<a data-ng-href="#{{menuItem.url}}" title="{{menuItem.title}}">
{{menuItem.name}}
</a>
</li>
</ul>
</div>
Utilisez un objet comme variable de commutateur.
Vous pouvez le faire simplement avec:
<ul class="nav navbar-nav">
<li ng-class="{'active':switch.linkOne}" ng-click="switch = {linkOne: true}"><a href="/">Link One</a></li>
<li ng-class="{'active':switch.linkTwo}" ng-click="switch = {link-two: true}"><a href="/link-two">Link Two</a></li>
</ul>
Chaque fois que vous cliquez sur un lien, l’objet commutateur est remplacé par un nouvel objet dans lequel seule la propriété correcte de l’objet commutateur est vraie. Les propriétés non définies seront évaluées comme étant fausses et la classe active ne sera pas affectée aux éléments qui en dépendent.
Cela a fait le tour pour moi:
var domain = '{{ DOMAIN }}'; // www.example.com or dev.example.com
var domain_index = window.location.href.indexOf(domain);
var long_app_name = window.location.href.slice(domain_index+domain.length+1);
// this turns http://www.example.com/whatever/whatever to whatever/whatever
app_name = long_app_name.slice(0, long_app_name.indexOf('/'));
//now you are left off with just the first whatever which is usually your app name
alors vous utilisez jquery (fonctionne aussi avec angular) pour ajouter une classe active
$('nav a[href*="' + app_name+'"]').closest('li').addClass('active');
et bien sur le css:
.active{background:red;}
cela fonctionne si vous avez votre code HTML comme ceci:
<ul><li><a href="/ee">ee</a></li><li><a href="/dd">dd</a></li></ul>
cela ajoutera automatiquement une classe active en utilisant l'URL de la page et colorera votre arrière-plan en rouge si vous êtes dans www.somesite.com/ee, c'est l'application et elle sera active.
C'est une réponse longue mais je pensais partager mon chemin:
.run(function($rootScope, $state){
$rootScope.$state = $state;
});
Modèle:
<ul class="nav navbar-nav">
<li ng-class="{ active: $state.contains('View1') }"><a href="...">View 1</a></li>
<li ng-class="{ active: $state.contains('View2') }"><a href="...">View 2</a></li>
<li ng-class="{ active: $state.contains('View3') }"><a href="...">View 3</a></li>
</ul>
Pour ceux qui utilisent ui-router:
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a href="...">View 1</a></li>
<li ui-sref-active="active"><a href="...">View 2</a></li>
<li ui-sref-active="active"><a href="...">View 3</a></li>
</ul>
Pour une correspondance exacte (par exemple, des états imbriqués?), Utilisez $state.name === 'full/path/to/state' ou ui-sref-active-eq="active"
Juste pour ajouter mes deux cents dans le débat, j'ai créé un pur module angular (sans jquery), qui fonctionnera également avec les URL de hachage contenant des données. ( i.g.#/this/is/path?this=is&some=data)
Vous ajoutez simplement le module en tant que dépendance et auto-active à l'un des ancêtres du menu. Comme ça:
<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 ressemble à 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 simplement utiliser la partie directive)
** Il est également intéressant de noter que cela ne fonctionne pas pour les hachages vides ( igexample.com/# ou simplement example.com), il doit avoir au moins example.com/#/ ou simplement example.com#/. Mais cela se produit automatiquement avec ngResource, etc.
- Voici le violon: http://jsfiddle.net/gy2an/8/
- Voici le github: https://github.com/Karl-Gustav/autoActive
- Voici ma réponse originale: https://stackoverflow.com/a/22282124/146564
Voici une autre solution pour tous ceux qui pourraient être intéressés. L'avantage de ceci est qu'il a moins de dépendances. Heck, cela fonctionne aussi sans serveur web. Donc, c'est complètement côté client.
HTML:
<nav class="navbar navbar-inverse" ng-controller="topNavBarCtrl"">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a>
</div>
<ul class="nav navbar-nav">
<li ng-click="selectTab()" ng-class="getTabClass()"><a href="#">Home</a></li>
<li ng-repeat="tab in tabs" ng-click="selectTab(tab)" ng-class="getTabClass(tab)"><a href="#">{{ tab }}</a></li>
</ul>
</div>
Explication:
Nous générons ici les liens de manière dynamique à partir d’un modèle angularjs en utilisant la directive ng-repeat. Magic se produit avec les méthodes selectTab() et getTabClass() définies dans le contrôleur pour cette barre de navigation présentée ci-dessous.
Manette:
angular.module("app.NavigationControllersModule", [])
// Constant named 'activeTab' holding the value 'active'. We will use this to set the class name of the <li> element that is selected.
.constant("activeTab", "active")
.controller("topNavBarCtrl", function($scope, activeTab){
// Model used for the ng-repeat directive in the template.
$scope.tabs = ["Page 1", "Page 2", "Page 3"];
var selectedTab = null;
// Sets the selectedTab.
$scope.selectTab = function(newTab){
selectedTab = newTab;
};
// Sets class of the selectedTab to 'active'.
$scope.getTabClass = function(tab){
return selectedTab == tab ? activeTab : "";
};
});
Explication:
La méthode selectTab() est appelée à l'aide de la directive ng-click. Ainsi, lorsque le lien est cliqué, la variable selectedTab est définie sur le nom de ce lien. Dans le code HTML, vous pouvez voir que cette méthode est appelée sans aucun argument pour l'onglet Accueil, de sorte qu'elle sera mise en surbrillance lors du chargement de la page.
La méthode getTabClass() est appelée via la directive ng-class dans le code HTML. Cette méthode vérifie si l'onglet dans lequel il se trouve est identique à la valeur de la variable selectedTab. Si la valeur est true, elle renvoie "active", sinon renvoie "" qui est appliqué comme nom de classe par la directive ng-class. Alors, quels que soient les css que vous avez appliqués à la classe active, ils seront appliqués à l'onglet sélectionné.
Je suggère d'utiliser une directive sur un lien. Ici est le violon.
Mais ce n'est pas encore parfait. Attention aux hashbangs;)
Voici le javascript pour la directive:
angular.module('link', []).
directive('activeLink', ['$location', function(location) {
return {
restrict: 'A',
link: function(scope, element, attrs, controller) {
var clazz = attrs.activeLink;
var path = attrs.href;
path = path.substring(1); //hack because path does not return including hashbang
scope.location = location;
scope.$watch('location.path()', function(newPath) {
if (path === newPath) {
element.addClass(clazz);
} else {
element.removeClass(clazz);
}
});
}
};
}]);
et voici comment il serait utilisé en HTML:
<div ng-app="link">
<a href="#/one" active-link="active">One</a>
<a href="#/two" active-link="active">One</a>
<a href="#" active-link="active">home</a>
</div>
après le style avec css:
.active{ color:red; }
Vous devrez juste ajouter la classe active- requise avec le code de couleur requis.
Ex: ng-class="{'active': currentNavSelected}" ng-click="setNav"
Vous pouvez également utiliser cette directive active-link https://stackoverflow.com/a/23138152/138716
Le parent li obtiendra une classe active lorsque l'emplacement correspond /url :
<li>
<a href="#!/url" active-link active-link-parent>
</li>