Si tengo una barra de navegación en bootstrap con los elementos

Home | About | Contact

¿Cómo configuro la clase activa para cada elemento del menú cuando están activos? Es decir, ¿cómo puedo configurar class="active"cuando la ruta angular está en

1. #/ para casa
2. #/about para la página acerca de
3. #/contact para la página de contacto

Una forma muy elegante es usar ng-controller para ejecutar un solo controlador fuera 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>

e incluir en controllers.js:

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

Acabo de escribir una directiva para manejar esto, por lo que simplemente puede agregar el atributo bs-active-linkal <ul>elemento padre , y cada vez que cambie la ruta, encontrará el enlace correspondiente y agregará la activeclase a la correspondiente <li>.

Puedes verlo en acción aquí: http://jsfiddle.net/8mcedv3b/

HTML de ejemplo:

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

Puede echar un vistazo a AngularStrap , la directiva de barra de navegación parece ser lo que está buscando:

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

        });
      });
    }
  };
});

Para usar esta directiva:

1. Descargue AngularStrap desde http://mgcrea.github.io/angular-strap/

2. Incluya el script en su página después de bootstrap.js:
   <script src="lib/angular-strap.js"></script>

3. Agregue las directivas a su módulo:
   angular.module('myApp', ['$strap.directives'])

4. Agregue la directiva a su barra de navegación:
   <div class="navbar" bs-navbar>

5. Agregue expresiones regulares en cada elemento de navegación:
   <li data-match-route="/about"><a href="#/about">About</a></li>

Aquí hay un enfoque simple que funciona bien con 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>

Dentro de su controlador AngularJS:

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

Si está trabajando con un enrutador angular, la directiva RouterLinkActive se puede usar con mucha elegancia:

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

En primer lugar, este problema se puede resolver de muchas maneras. Es posible que este camino no sea el más elegante, pero ciertamente funciona.

Aquí hay una solución simple que debería poder agregar a cualquier proyecto. Simplemente puede agregar una "pageKey" o alguna otra propiedad cuando configure su ruta que puede usar para desconectar. Además, puede implementar un escucha en el método $ routeChangeSuccess del objeto $ route para escuchar la finalización exitosa de un cambio de ruta.

Cuando se activa su controlador, obtiene la clave de página, y la usa para localizar elementos que deben ser "ACTIVOS" para esta página, y aplica la clase ACTIVE.

Tenga en cuenta que necesita una forma de hacer TODOS los elementos "EN ACTIVO". Como puede ver, estoy usando la clase .pageKey en mis elementos de navegación para desactivarlos, y estoy usando .pageKey_ {PAGEKEY} para activarlos individualmente. Cambiarlos a inactivos se consideraría un enfoque ingenuo, potencialmente obtendría un mejor rendimiento al usar la ruta anterior para hacer que solo los elementos activos estén inactivos, o podría alterar el selector jquery para seleccionar solo los elementos activos que se volverán inactivos. El uso de jquery para seleccionar todos los elementos activos es probablemente la mejor solución, ya que garantiza que todo se limpie para la ruta actual en caso de cualquier error css que pueda haber estado presente en la ruta anterior.

Lo que significaría cambiar esta línea de código:

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

a este

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

Aquí hay un código de muestra:

Dada una barra de navegación de arranque 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>

Y un módulo angular y controlador como el siguiente:

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

En realidad, puede usar la directiva angular-ui-utilsui-route :

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

o:

Controlador de encabezado

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

Página de inicio

<!-- 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 está utilizando ui-utils, también puede estar interesado en ui-router para administrar vistas parciales / anidadas.

Todas estas respuestas me parecen un poco complicadas, lo siento. Así que he creado una pequeña directiva que debería funcionar por barra de navegación:

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

Uso:

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

Utilizo la directiva ng-class con $ location para lograrlo.

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

Requiere que la barra de navegación esté dentro de un controlador principal con acceso al servicio $ location como este:

bajasApp.controller('MenuCntl', ['$scope','$route', '$routeParams', '$location', 
   function MenuCntl($scope, $route, $routeParams, $location) {
   $scope.$route = $route;
   $scope.$location = $location;
   $scope.$routeParams = $routeParams;
}]);

Puede lograr esto con un condicional en una expresión angular, como:

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

Dicho esto, creo que una directiva angular es la forma más "adecuada" de hacerlo, a pesar de que la subcontratación de gran parte de esta mini lógica puede contaminar de alguna manera su base de código.

Utilizo condicionales para el estilo de la GUI de vez en cuando durante el desarrollo, porque es un poco más rápido que crear directivas. Sin embargo, no podría decirte una instancia en la que realmente permanecieron en la base del código durante mucho tiempo. Al final, lo convierto en una directiva o encuentro una mejor manera de resolver el problema.

Si usa ui-router , el siguiente ejemplo debería satisfacer sus necesidades según el comentario de @ DanPantry sobre la respuesta aceptada sin agregar ningún código del lado del controlador:

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

Puede consultar los documentos para obtener más información al respecto.

Si prefiere no usar AngularStrap, entonces esta directiva debería ser la solución . Esta es una modificación 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>

Nota: Las clases HTML anteriores suponen que está utilizando Bootstrap 3.x

Aquí está mi opinión al respecto. Una pequeña combinación de respuestas encontradas en esta publicación. Tuve un caso ligeramente diferente, por lo que mi solución consiste en separar el menú en su propia plantilla para usar dentro de la Directiva Definición Ojbect y luego agregar mi barra de navegación a la página en la que lo necesitaba. Básicamente, tenía una página de inicio de sesión en la que no quería incluir mi menú, así que utilicé ngInclude e inserté esta directiva cuando inicié sesión:

DIRECTIVA:

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;

        }
    }
 }
});

PLANTILLA DIRECTIVA (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 QUE INCLUYE LA DIRECTIVA

<comp-navbar/>

Espero que esto ayude

Extendiendo mi respuesta, necesitaba esto para manejar una estructura como esta.

-índice

-eventos <-active
--- lista de
eventos
--- edición de eventos --- mapa de eventos <-clicked

-places
--- place-list
--- place-edit
--- place-map

así que en lugar de hacer coincidir, tuve que usar indexOf, para validar enlaces secundarios que están formateados para coincidir con la condición. Entonces para 'eventos':

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

Esta es una solución 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>

Junto con la respuesta AngularStrap de @ Olivier, también implementé la respuesta de kevinknelson de: https://github.com/twbs/bootstrap/issues/9013 .

De forma nativa, la barra de navegación Bootstrap3 no fue diseñada para una aplicación de una sola página (por ejemplo, Angular) y, por lo tanto, el menú cuando se encontraba en una pantalla pequeña no se colapsó al hacer 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>

Gracias a @Pylinux . He usado su técnica y también la modifiqué para admitir "un" nivel de menú desplegable (sub ul / li), ya que eso es lo que necesitaba. Véalo en acción en el siguiente enlace de violín.

Fiddle actualizado basado en la respuesta de pylinux: http://jsfiddle.net/abhatia/en4qxw6g/

Hice los siguientes tres cambios, para admitir un menú desplegable de un nivel:
1. Agregué un valor de clase de dd (menú desplegable) para el elemento "a" debajo de li que necesita tener una lista ulterior.

         <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 actualizado para agregar la siguiente lógica nueva.

 if(angular.element(li).parent().parent().children('a').hasClass("dd"))
 {angular.element(li).parent().parent().children('a.dd').addClass('active');}

3. CSS actualizado para agregar lo siguiente:

a.active {background-color:red;}

Esperemos que esto sea útil para alguien que busque implementar un menú desplegable de un solo nivel.

Use un objeto como una variable de cambio.
Puede hacer esto en línea simplemente con:

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

Cada vez que hace clic en un enlace, el objeto de cambio se reemplaza por un nuevo objeto donde solo la propiedad correcta del objeto de cambio es verdadera. Las propiedades indefinidas se evaluarán como falsas, por lo que los elementos que dependen de ellas no tendrán asignada la clase activa.

También puede usar esta directiva de enlace activo https://stackoverflow.com/a/23138152/1387163

El padre li obtendrá una clase activa cuando la ubicación coincida / url :

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

Sugiero usar una directiva en un enlace. Aquí está el violín.

Pero aún no es perfecto. Cuidado con los hashbangs;)

Aquí está la directiva JavaScript para:

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

y así es como se usaría 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>

luego peinado con css:

.active{ color:red; }

Solo para agregar mis dos centavos en el debate, hice un módulo angular puro (sin jquery), y también funcionará con URL hash que contengan datos. ( ig #/this/is/path?this=is&some=data )

Simplemente agrega el módulo como una dependencia y auto-activea uno de los antepasados ​​del menú. Me gusta esto:

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

Y el módulo se ve así:

(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);
            }
        }
    }]);
}());

* (Por supuesto, solo puede usar la parte directiva)

** También vale la pena notar que esto no funciona para los hashes vacíos ( ig example.com/# o simplemente example.com) que necesita tener al menos example.com/#/o solo example.com#/. Pero esto sucede automáticamente con ngResource y similares.

• Aquí está el violín: http://jsfiddle.net/gy2an/8/
• Aquí está el github: https://github.com/Karl-Gustav/autoActive
• Aquí está mi respuesta original: https://stackoverflow.com/a/22282124/1465640

Esto hizo el truco para mí:

  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

luego usas jquery (también funciona con angular) para agregar la clase activa

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

y por supuesto el css:

.active{background:red;}

esto funciona si tienes tu html como este:

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

esto agregará automáticamente la clase activa usando la URL de la página y coloreará su fondo a rojo si está en www.somesite.com/ee que es la 'aplicación' y estará activa

Esto fue respondido por mucho tiempo, pero pensé en compartir mi camino:

.run(function($rootScope, $state){
 $rootScope.$state = $state;
});

Modelo:

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

Para aquellos que usan 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>

Por coincidencia exacta (por ejemplo, estados anidados?) El uso $state.name === 'full/path/to/state'oui-sref-active-eq="active"

Aquí hay otra solución para cualquiera que pueda estar interesado. La ventaja de esto es que tiene menos dependencias. Diablos, también funciona sin un servidor web. Entonces es completamente del lado del cliente.

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>

Explicación:

Aquí estamos generando los enlaces dinámicamente a partir de un modelo angularjs utilizando la directiva ng-repeat. La magia ocurre con los métodos selectTab()y getTabClass()definidos en el controlador para esta barra de navegación presentada a continuación.

Controlador:

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 : "";
    };
});

Explicación:

selectTab()El método se llama usando la ng-clickdirectiva. Entonces, cuando se hace clic en el enlace, la variable selectedTabse establece con el nombre de este enlace. En el HTML, puede ver que se llama a este método sin ningún argumento para la pestaña Inicio, de modo que se resaltará cuando se cargue la página.

El getTabClass()método se llama vía ng-classdirectiva en el HTML. Este método verifica si la pestaña en la que se encuentra es la misma que el valor de la selectedTabvariable. Si es verdadero, devuelve "activo", de lo contrario, devuelve "", que se aplica como nombre de clase por ng-classdirectiva. Entonces, cualquier css que haya aplicado a la clase activese aplicará a la pestaña seleccionada.

Solo tendrá que agregar la activeclase requerida con el código de color requerido.

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