Я нахожу все эти ответы немного сложными для меня, извините. Итак, я создал небольшую директиву, которая должна работать для каждой панели навигации:

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

Использование:

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

Для этого я использую директиву ng-class с $ location.

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

Для этого требуется, чтобы панель навигации находилась внутри основного контроллера с доступом к сервису $ location следующим образом:

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

Вы можете добиться этого с помощью условного выражения в угловом выражении, например:

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

При этом я считаю, что директива angular является более «правильным» способом сделать это, хотя передача большей части этой мини-логики на аутсорсинг может несколько загрязнить вашу кодовую базу.

Я время от времени использую условные обозначения для стилизации графического интерфейса во время разработки, потому что это немного быстрее, чем создание директив. Я не могу назвать вам случая, когда они действительно оставались в базе кода надолго. В конце концов, я либо превращаю это в директиву, либо нахожу лучший способ решить проблему.

Если вы используете ui-router, следующий пример должен удовлетворить ваши потребности на основе @ DanPantry прокомментируйте принятый ответ без добавления кода на стороне контроллера:

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

Вы можете найти в документации подробнее об этом.

Если вы предпочитаете не использовать AngularStrap, то эта директива должна помочь! Это модификация 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>

Примечание. Приведенные выше классы HTML предполагают, что вы используете Bootstrap 3.x.

Вот мое мнение об этом. Небольшая комбинация ответов, найденных в этом посте. У меня был немного другой случай, поэтому мое решение включает в себя разделение меню на собственный шаблон, который будет использоваться в Ojbect определения директивы, а затем добавить мою панель навигации на страницу, на которой мне это нужно. По сути, у меня была страница входа в систему, на которой я не хотел включать свое меню, поэтому я использовал ngInclude и вставлял эту директиву при входе в систему:

ДИРЕКТИВА:

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, ВКЛЮЧАЮЩИЙ ДИРЕКТИВУ

<comp-navbar/>

Надеюсь это поможет

Расширяя мой ответ, мне это нужно для обработки такой структуры.

-показатель

-events ‹-active
--- список-событий
--- редактирование-событий
--- карта-событий‹ -clicked

-места
--- список мест
--- редактирование места
--- карта мест

поэтому вместо сопоставления мне пришлось использовать indexOf, чтобы проверять дочерние ссылки, отформатированные в соответствии с условием. Итак, для «событий»:

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

Это простое решение

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

В сочетании с ответом @Olivier AngularStrap я также реализовал ответ Кевинкнельсона из: https://github.com/twbs/bootstrap/issues/9013.

Изначально панель навигации Bootstrap3 не была предназначена для одностраничного (например, Angular) приложения, и поэтому меню на маленьком экране не сворачивалось при нажатии.

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>

Спасибо @Pylinux. Я использовал его технику, а также модифицировал ее для поддержки «одного» уровня выпадающего меню (sub ul / li), так как это то, что мне было нужно. Посмотрите его в действии по ссылке ниже.

Обновленный Fiddle на основе ответа pylinux - http://jsfiddle.net/abhatia/en4qxw6g/

Я внес следующие три изменения, чтобы поддерживать одноуровневое раскрывающееся меню:
1. Добавлено значение класса dd (раскрывающееся меню) для элемента «a» в li, который должен иметь список 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, чтобы добавить следующую новую логику.

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

3. Обновлен CSS, чтобы добавить следующее:

a.active {background-color:red;}

Надеюсь, это будет полезно для тех, кто хочет реализовать одноуровневое раскрывающееся меню.

Используйте объект в качестве переменной-переключателя.
Вы можете сделать это очень просто с помощью:

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

Каждый раз, когда вы щелкаете ссылку, объект-переключатель заменяется новым объектом, в котором истинно только правильное свойство объекта-переключателя. Неопределенные свойства будут оцениваться как ложные, поэтому элементам, которые от них зависят, не будет назначен активный класс.

Вы также можете использовать эту директиву активной ссылки https://stackoverflow.com/a/23138152/1387163

Родительский li получит активный класс при совпадении местоположения / url:

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

Я предлагаю использовать директиву по ссылке. Вот скрипка.

Но это еще не идеально. Остерегайтесь хэшбэгов;)

Вот директива javascript для:

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

и вот как это будет использоваться в 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>

затем стилизация с помощью css:

.active{ color:red; }

Чтобы добавить свои два цента в дискуссию, я создал чистый угловой модуль (без jquery), и он также будет работать с хэш-адресами, содержащими данные. (например, #/this/is/path?this=is&some=data)

Вы просто добавляете модуль как зависимость и auto-active к одному из предков меню. Нравится:

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

А модуль выглядит так:

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

* (Вы, конечно, можете просто использовать директивную часть)

** Также стоит отметить, что это не работает для пустых хэшей (ig example.com/# или просто example.com) он должен иметь хотя бы example.com/#/ или просто example.com#/. Но это происходит автоматически с ngResource и т.п.

• Вот скрипка: http://jsfiddle.net/gy2an/8/
• Вот github: https://github.com/Karl-Gustav/autoActive
• Вот мой первоначальный ответ: https://stackoverflow.com/a/22282124/1465640

Это помогло мне:

  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

то вы используете jquery (также работает с angular), чтобы добавить активный класс

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

и, конечно же, css:

.active{background:red;}

это работает, если у вас есть такой HTML:

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

это автоматически добавит активный класс, используя URL-адрес страницы, и закрасит ваш фон в красный цвет, если ваш в www.somesite.com/ee thaen ee является `` приложением '', и он будет активен

На это длинный ответ, но я подумал, что поделюсь своим путем:

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

Шаблон:

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

Для тех, кто использует 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>

Для точного совпадения (например, вложенных состояний?) Используйте $state.name === 'full/path/to/state' или ui-sref-active-eq="active"

Вот еще одно решение для всех, кому это может быть интересно. Преимущество этого в том, что у него меньше зависимостей. Черт возьми, он работает и без веб-сервера. Так что это полностью на стороне клиента.

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>

Explanation:

Здесь мы динамически генерируем ссылки из модели angularjs с помощью директивы ng-repeat. Волшебство происходит с методами selectTab() и getTabClass(), определенными в контроллере для этой панели навигации, представленной ниже.

Контроллер:

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

Объяснение:

selectTab() метод вызывается с помощью директивы ng-click. Поэтому при нажатии на ссылку переменная selectedTab устанавливается равной имени этой ссылки. В HTML вы можете видеть, что этот метод вызывается без каких-либо аргументов для вкладки «Главная», поэтому он будет выделен при загрузке страницы.

Метод getTabClass() вызывается директивой ng-class в HTML. Этот метод проверяет, совпадает ли вкладка, на которой он находится, со значением переменной selectedTab. Если true, он возвращает «active», иначе возвращает «», который применяется в качестве имени класса директивой ng-class. Тогда любой css, который вы применили к классу active, будет применен к выбранной вкладке.

Просто вам нужно будет добавить требуемый active-класс с нужным цветовым кодом.

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