Napisałem właśnie dyrektywę, aby to obsłużyć, więc możesz po prostu dodać atrybut {[2] } do elementu nadrzędnego <ul>, i za każdym razem, gdy zmieni się trasa, znajdzie pasujące łącze i doda klasę active do odpowiedniego <li>.

Możesz zobaczyć go w akcji tutaj: http://jsfiddle.net/8mcedv3b/

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

Możesz spojrzeć na AngularStrap, dyrektywa navbar wydaje się być tym, czego szukasz:

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

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

Aby użyć niniejszej dyrektywy:

1. Pobierz AngularStrap z http://mgcrea.github.io/angular-strap/

2. Dołącz skrypt na swojej stronie po bootstrap.js:
   <script src="lib/angular-strap.js"></script>

3. Dodaj dyrektywy do swojego Moduł:
   angular.module('myApp', ['$strap.directives'])

4. Dodaj dyrektywę do paska nawigacyjnego:
   <div class="navbar" bs-navbar>

5. Dodawanie wyrażeń regularnych dla każdego elementu nav:
   <li data-match-route="/about"><a href="#/about">About</a></li>

Oto proste podejście, które działa dobrze z 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>

Wewnątrz Twojego kontrolera AngularJS:

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

Przede wszystkim problem ten można rozwiązać na wiele sposobów. Ten sposób może nie jest najbardziej elegancki, ale cerntainly działa.

Oto proste rozwiązanie, które powinieneś móc dodać do każdego projektu. Możesz po prostu dodać "pageKey" lub inną właściwość podczas konfigurowania trasy, której możesz użyć do wyłączenia. Dodatkowo można zaimplementować listener w metodzie $routeChangeSuccess obiektu $ route, aby nasłuchać w celu pomyślnego zakończenia trasy zmiana.

Gdy zostanie wywołany Twój handler, otrzymasz klucz page i użyjesz go do zlokalizowania elementów, które muszą być "aktywne" dla tej strony, a następnie zastosujesz klasę ACTIVE.

Pamiętaj, że potrzebujesz sposobu, aby wszystkie elementy były "aktywne". Jak widzisz, używam .Klasa pageKey na moich przedmiotach nawigacyjnych, aby je wszystkie wyłączyć, a ja używam .pageKey_ {PAGEKEY} aby indywidualnie je włączyć. Przełączenie ich wszystkich na nieaktywne, byłoby uważane za naiwne podejście, potencjalnie byłoby lepiej wydajność przy użyciu poprzedniej trasy, aby tylko aktywne elementy nieaktywne, lub można zmienić selektor jQuery, aby tylko wybrać aktywne elementy, które mają być nieaktywne. Używanie jquery do wybierania wszystkich aktywnych elementów jest prawdopodobnie najlepszym rozwiązaniem, ponieważ zapewnia, że wszystko jest wyczyszczone dla bieżącej trasy w przypadku błędów css, które mogły być obecne na poprzedniej trasie.

Co oznaczałoby zmianę tej linii kodu:

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

To this one

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

Oto kilka przykładowy kod:

Podano Bootstrap navbar

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

Oraz moduł kątowy i kontroler jak poniżej:

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

Jeśli pracujesz z routerem Angular, routerlinkactive dyrektywa może być używana naprawdę elegancko:

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

Możesz użyć angular-ui-utils' ui-route dyrektywa:

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

Lub:

Header Controller

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

Strona indeksu

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

Jeśli używasz ui-utils, możesz być również zainteresowany ui-router do zarządzania częściowymi / zagnieżdżonymi widokami.

Wszystkie odpowiedzi są dla mnie zbyt skomplikowane, przepraszam. Stworzyłem więc małą dyrektywę, która powinna działać na zasadzie 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');
            });
        }
    };
});

Użycie:

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

Używam dyrektywy klasy ng z $location aby to osiągnąć.

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

Wymaga, aby pasek nawigacyjny znajdował się wewnątrz głównego kontrolera z dostępem do usługi $ location w następujący sposób:

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

Można to osiągnąć za pomocą warunkowego wyrażenia kątowego, np.:

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

Biorąc to pod uwagę, uważam, że kanciasta dyrektywa jest bardziej "właściwym" sposobem robienia tego, mimo że outsourcing wielu z tej Mini-logiki może nieco zanieczyścić twoją bazę kodu.

Używam conditionals do stylizacji GUI co jakiś czas podczas tworzenia, ponieważ jest to trochę szybsze niż tworzenie dyrektyw. Nie mogłem ci jednak powiedzieć, w którym faktycznie pozostali w baza kodów na długi czas. W końcu albo zamienię to w dyrektywę, albo znajdę lepszy sposób rozwiązania problemu.

Jeśli używasz UI-routera , poniższy przykład powinien zaspokoić Twoje potrzeby na podstawie komentarza @ DanPantry na zaakceptowaną odpowiedź bez dodawania kodu po stronie kontrolera:

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

Jeśli wolisz nie używać AngularStrap to ta dyrektywa powinna załatwić sprawę!. Jest to modyfikacja 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>

Uwaga: powyższe klasy HTML zakładają, że używasz Bootstrap 3.x

Oto moje zdanie na ten temat. Trochę kombinacji odpowiedzi znalezionych w tym poście. Miałem nieco inny przypadek, więc moje rozwiązanie polega na rozdzieleniu menu na własny szablon, który ma być używany w definicji dyrektywy Ojbect, a następnie dodać mój navbar do strony, na której go potrzebowałem. Zasadniczo miałem stronę logowania, na której nie chciałem włączać mojego menu, więc użyłem ngInclude i wstawiłem tę dyrektywę po zalogowaniu:

Dyrektywa:

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;

        }
    }
 }
});

SZABLON DYREKTYWY (szablony / 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 ZAWIERAJĄCY DYREKTYWĘ

<comp-navbar/>

Hope this helps

Rozszerzając odpowiedź myl, potrzebowałem tego, aby obsłużyć taką strukturę.

-indeks

- zdarzenia --- event-list
--- event-edit
--- event-map

-miejsca
--- miejsce-lista
--- place-edit
--- place-map

Więc zamiast dopasowywania, musiałem użyć indexOf, aby zweryfikować linki potomne, które są sformatowane tak, aby pasowały do warunku. "Wydarzenia": {]}

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

Jest to proste rozwiązanie

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

W połączeniu z AngularStrap odpowiedzi @ Olivier, zaimplementowałem również odpowiedź kevinknelsona z: https://github.com/twbs/bootstrap/issues/9013 .

Natywnie, Bootstrap3 navbar nie został zaprojektowany dla aplikacji jednostronicowej (np. Angular), a więc menu, gdy na małym ekranie nie zapadało się po kliknięciu.

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>

Dzięki @Pylinux . Użyłem jego techniki, a także zmodyfikowałem ją, aby obsługiwać "jeden" poziom menu rozwijanego (sub ul / li), ponieważ tego potrzebowałem. Zobacz to w akcji w linku poniżej.

Zaktualizowano Fiddle na podstawie odpowiedzi pylinux - http://jsfiddle.net/abhatia/en4qxw6g/

Dokonałem następujących trzech zmian, w celu obsługi jednego poziomu menu rozwijanego:
1. Dodano wartość klasy dd (rozwijaną) dla elementu" a " pod li, który musi mieć sub lista 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. Zaktualizowano Javascript, aby dodać następującą nową logikę.

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

3. Zaktualizowano CSS do add the following:

a.active {background-color:red;}

Mam nadzieję, że będzie to pomocne dla kogoś, kto chce wdrożyć menu rozwijane z pojedynczym poziomem.

Możesz również użyć dyrektywy active-link https://stackoverflow.com/a/23138152/1387163

Rodzic li otrzyma aktywną klasę, gdy lokalizacja pasuje / url :

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

Proponuję użyć dyrektywy w linku. tutaj jest skrzypce.

Oto javascript dla dyrektywy:

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

A oto jak to będzie używane w 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>

Następnie stylizacja za pomocą css:

.active{ color:red; }

Aby dodać moje dwa grosze w dyskusji zrobiłem czysty moduł angular (bez jquery), i będzie również działać z hash URL zawierających dane. (i. g. #/this/is/path?this=is&some=data)

Wystarczy dodać moduł jako zależność i auto-active do jednego z przodków menu. Tak:

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

A moduł wygląda tak:

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

* (możesz oczywiście użyć tylko części dyrektywy)

* * warto również zauważyć, że to nie działa dla pustych hashów (i. g. example.com/# lub po prostu example.com) musi mieć co najmniej example.com/#/ lub po prostu example.com#/. Ale dzieje się to automatycznie z ngResource i tym podobne.

• Oto skrzypce: http://jsfiddle.net/gy2an/8 /
• Oto github: https://github.com/Karl-Gustav/autoActive
• Oto moja oryginalna odpowiedź: https://stackoverflow.com/a/22282124/1465640

To mi pomogło:

  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

Następnie używasz jquery (działa również z angular), aby dodać klasę active

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

I oczywiście css:

.active{background:red;}

To działa, jeśli masz swój html w ten sposób:

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

To atumatycznie doda klasę active używając adresu URL strony i pokoloruje tło na czerwone, jeśli w www.somesite.com/ee thaen ee jest "aplikacją" i będzie aktywna

To jest długa odpowiedź, ale pomyślałem, że podzielę się swoją drogą:

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

Szablon:

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

Dla osób używających 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>

Dla dokładnego dopasowania (np. zagnieżdżone Stany?) użyj $state.name === 'full/path/to/state' lub ui-sref-active-eq="active"

Oto inne rozwiązanie dla każdego, kto może być zainteresowany. Zaletą tego jest to, że ma mniej zależności. Heck, to działa bez serwera internetowego też. Więc jest całkowicie po stronie klienta.

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>

Wyjaśnienie:

Tutaj dynamicznie generujemy linki z modelu angularjs za pomocą dyrektywy ng-repeat. Magia dzieje się z metodami selectTab() i getTabClass() zdefiniowanymi w kontrolerze dla tego navbara przedstawionego poniżej.

Kontroler:

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

Wyjaśnienie:

selectTab() metoda jest wywoływana za pomocą dyrektywy ng-click. Tak więc po kliknięciu łącza zmienna selectedTab jest ustawiona na nazwę tego łącza. W HTML możesz zobaczyć, że ta metoda jest wywoływana bez żadnego argumentu dla Karty Home tak, że będzie podświetlona podczas ładowania strony.

Metoda getTabClass() jest wywoływana poprzez dyrektywę ng-class W HTML. Ta metoda sprawdza, czy karta, w której się znajduje, jest taka sama jak wartość selectedTab zmienna. Jeśli true, zwraca "active", else zwraca"", która jest stosowana jako nazwa klasy przez dyrektywę ng-class. Następnie css, który zastosowałeś do klasy active, zostanie zastosowany do wybranej karty.

Po prostu musisz dodać wymaganą active - klasę z wymaganym kodem koloru.

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