je viens d'écrire une directive pour gérer cela, donc vous pouvez simplement ajouter l'attribut bs-active-link à l'élément <ul> parent, et à chaque fois que la route a changé, il trouvera le lien correspondant, et ajouter la classe active à 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 avoir un coup d'oeil à AngularStrap , la barre de navigation de la directive semble être ce que vous êtes à la recherche pour:

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 l'application de la présente directive:

1. télécharger AngularStrap de http://mgcrea.github.io/angular-strap /

2. incluez le script sur votre page après bootstrap.js:
   
   <script src="lib/angular-strap.js"></script>

3. ajouter les directives à votre module:
   
   angular.module('myApp', ['$strap.directives'])

4. ajouter la directive à votre navbar:
   
   <div class="navbar" bs-navbar>

5. ajouter regexes sur chaque article nav:
   
   <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;
};

d'Abord et avant tout, ce problème peut être résolu de plusieurs manières. Cette façon n'est peut-être pas la plus élégante, mais elle fonctionne certainement.

Voici une solution simple, vous devriez être en mesure d'ajouter à n'importe quel projet. Vous pouvez simplement ajouter un "pageKey" ou une autre propriété lorsque vous configurez votre trajet que vous pouvez utiliser à la clé. De plus, vous pouvez implémenter un écouteur sur la méthode $ routeChangeSuccess de l'objet $route pour écouter l'exécution réussie d'un changement d'itinéraire.

lorsque votre gestionnaire démarre, vous obtenez la touche page, et utilisez cette touche pour localiser les éléments qui doivent être" actifs " 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 "en activité". Comme vous pouvez le voir, j'utilise le .cours de pageKey sur mes nav items pour les désactiver tous, et j'utilise le .pageKey_{PAGEKEY} pour les allumer individuellement. Passer tous les inactifs, serait considéré comme un naïf approche, potentiellement vous obtiendriez une meilleure performance en utilisant la route précédente pour rendre seulement les éléments actifs inactifs, ou vous pourriez modifier le sélecteur de jquery pour sélectionner seulement les éléments actifs à rendre inactifs. L'utilisation de jquery pour sélectionner tous les éléments actifs est probablement la meilleure solution car elle garantit que tout est nettoyé pour la route actuelle en cas de bogues css qui auraient pu être présents sur la route précédente.

ce qui signifierait changer cette ligne de code:

$(".pagekey").toggleClass("active", false);

à celui-ci

$(".active").toggleClass("active", false);

voici un exemple de code:

avec bootstrap navbar 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 angulaire et un contrôleur 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>

si vous travaillez avec un routeur angulaire, le RouterLinkActive la directive peut être utilisée très élégamment:

<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>

vous pouvez réellement utiliser angular-ui-utils ' ui-route directive:

<a ui-route ng-href="/">Home</a>
<a ui-route ng-href="/about">About</a>
<a ui-route ng-href="/contact">Contact</a>

ou:

En-Tête De Contrôleur

/**
 * 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.'
      }
    ];
  });

Page Index

<!-- 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 pourriez également être intéressé par ui-router pour gérer les 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 sur une base per navbar:

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');
            });
        }
    };
});

Utilisation:

<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 de classe ng avec $location pour la réaliser.

<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>

il exige que la barre de navigation soit à l'intérieur D'un contrôleur principal avec 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;
}]);

vous pouvez obtenir ceci avec un conditionnel dans une expression angulaire, telle que:

<a href="#" class="{{ condition ? 'active' : '' }}">link</a>

cela dit, je trouve qu'une directive angulaire est la façon la plus" correcte " de le faire, même si externaliser beaucoup de cette mini-logique peut quelque peu polluer votre base de code.

j'utilise des conditionnels pour le stylisme graphique de temps en temps pendant le développement, parce que c'est un peu plus rapide que de créer des directives. Je ne pourrais pas vous dire une instance bien qu'ils soient restés longtemps dans la base de code. En fin de compte je l'ai transformer en une directive ou trouver une meilleure façon de résoudre le problème.

si vous utilisez ui-router , l'exemple suivant devrait satisfaire vos besoins basés sur le 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 vérifier le docs pour plus d'informations sur elle.

si vous préférez ne pas utiliser AngularStrap alors cette directive devrait faire l'affaire!. C'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>

Note: les classes HTML ci-dessus supposent que vous utilisez Bootstrap 3.x

C'est mon avis. Un peu d'une combinaison de réponses sur ce post. J'ai eu un cas légèrement différent, donc ma solution consiste à séparer le menu dans son propre modèle pour être utilisé dans la définition de la Directive Ojbect puis ajouter mon navbar à la page dont j'avais besoin sur. Fondamentalement, j'ai eu une page de connexion que je ne voulais pas inclure mon menu sur, donc j'ai utilisé ngInclude et insérer cette directive lorsque connecté:

DIRECTIVE:

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;

        }
    }
 }
});

(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 INCLUT LA DIRECTIVE

<comp-navbar/>

Espérons que cette aide

extension MYL réponse, j'avais besoin de ceci pour gérer une structure comme celle-ci.

- index

-des événements<-active

---event-list

---en cas de modification

---événement-map <-clique sur le bouton

-lieux

---liste des lieux

---lieu-modifier

---lieu-Carte

donc au lieu de correspondre, Je a dû utiliser indexOf, afin de valider les liens enfants qui sont formatés pour correspondre à la condition. Donc pour les "é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>

en conjonction avec la réponse AngularStrap de @Olivier, j'ai aussi mis en œuvre la réponse de kevinknelson de: https://github.com/twbs/bootstrap/issues/9013 .

nativement, le Bootstrap3 navbar n'a pas été conçu pour une seule page (par exemple angulaire) application et donc le menu lorsque sur un petit écran ne s'effondre pas sur le clic.

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>

merci à @Pylinux . J'ai utilisé sa technique et également modifié afin de soutenir "un" niveau de menu déroulant (sous-ul/li), car c'est ce dont j'avais besoin. Voyez-le en action dans le lien fiddle ci-dessous.

mis à jour Fiddle basé sur la réponse de pylinux - http://jsfiddle.net/abhatia/en4qxw6g /

j'ai fait les trois changements suivants, afin de soutenir un niveau de menu déroulant:

1. Ajout d'une valeur de classe dd (dropdown) pour l'élément "a" 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. Mise à jour de Javascript 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 à ajouter le texte suivant:

a.active {background-color:red;}

espérons que cela sera utile à quelqu'un qui cherche à mettre en œuvre le menu déroulant à un seul niveau.

vous pouvez également utiliser cette directive de lien actif https://stackoverflow.com/a/23138152/1387163

Parent li obtiendrez classe active lorsque l'emplacement correspond à url :

<li>
    <a href="#!/url" active-link active-link-parent>
</li>

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 styling avec css:

.active{ color:red; }

juste pour ajouter mes deux cents dans le débat, j'ai fait un module angulaire PUR (Pas de jquery), et il fonctionnera également avec des URL de hachage contenant des données. ( I. g. #/this/is/path?this=is&some=data )

il suffit d'ajouter le module comme dépendance et 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 ressemblent à 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 directive partie)

** Il est également intéressant de remarquer que cela ne fonctionne pas pour vider les hachages ( je.g. example.com/# ou tout simplement example.com ), il doit avoir au moins example.com/#/ ou tout simplement example.com#/ . Mais cela se produit automatiquement avec ngResource et autres.

• 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/1465640

cela a fait l'affaire 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

puis vous utilisez jquery (fonctionne avec angular too) pour ajouter la classe active

$('nav a[href*="' + app_name+'"]').closest('li').addClass('active');

et bien sûr le css:

.active{background:red;}

cela fonctionne si vous avez votre html comme ceci:

<ul><li><a href="/ee">ee</a></li><li><a href="/dd">dd</a></li></ul>

cela ajoutera automatiquement la classe active en utilisant l'url de la page et la couleur de votre fond en rouge si votre dans www.somesite.com/ee c'est la " app " et elle être actif

c'est une réponse longue mais j'ai pensé que je partagerais ma façon:

.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 correspondance exacte (par ex. États imbriqués?) utiliser $state.name === 'full/path/to/state' ou ui-sref-active-eq="active"

voici une autre solution pour tous ceux qui pourraient être intéressés. L'avantage, c'est qu'il a moins de dépendance. Ça marche 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 dynamiquement à partir d'un modèle angularjs en utilisant la directive ng-repeat . La magie se produit avec les méthodes selectTab() et getTabClass() défini dans le contrôleur pour ce navbar présenté ci-dessous.

contrôleur:

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:

selectTab() est appelée en utilisant la directive ng-click . Ainsi, lorsque le lien est cliqué, la variable selectedTab est le nom de ce lien. Dans le HTML, vous pouvez voir que cette méthode est appelée sans aucun argument pour l'onglet Home de sorte qu'elle sera mise en évidence lorsque la page se charge.

la méthode getTabClass() est appelée via la directive ng-class dans le HTML. Cette méthode vérifie si l'onglet dans lequel elle se trouve est la même que la valeur de la variable selectedTab . Si true, il retourne "active" else retourne " "qui est appliqué comme nom de classe par la directive ng-class . Ensuite, quel que soit le css que vous avez appliqué à la classe active sera appliqué à l'onglet sélectionné.

il suffit d'ajouter la classe requise active - avec le code de couleur requis.

Ex: ng-class="{'active': currentNavSelected}" ng-click="setNav"