使用angular-ui-router的ui-sref-active指令 https://github.com/angular-ui/ui-router/wiki/Quick-Reference#statename

<德> <li ui-sref-active=“active”类=“项目”> <a href ="应用程序。用户({用户:‘bilbobaggins})“> @bilbobaggins < / a > < / li > < !——...--> < /德>

对于那些使用ui-router的人，我的答案有点类似于Ender2050，但我更喜欢通过州名测试来做到这一点:

$scope.isActive = function (stateName) {
  var active = (stateName === $state.current.name);
  return active;
};

相应的HTML:

<ul class="nav nav-sidebar">
    <li ng-class="{ active: isActive('app.home') }"><a ui-sref="app.home">Dashboard</a></li>
    <li ng-class="{ active: isActive('app.tiles') }"><a ui-sref="app.tiles">Tiles</a></li>
</ul>

对于AngularUI路由器用户:

<a ui-sref-active="active" ui-sref="app">

这将在选中的对象上放置一个活动类。

我是这样做的:

var myApp = angular.module('myApp', ['ngRoute']);

myApp.directive('trackActive', function($location) {
    function link(scope, element, attrs){
        scope.$watch(function() {
            return $location.path();
        }, function(){
            var links = element.find('a');
            links.removeClass('active');
            angular.forEach(links, function(value){
                var a = angular.element(value);
                if (a.attr('href') == '#' + $location.path() ){
                    a.addClass('active');
                }
            });
        });
    }
    return {link: link};
});

这可以让你在一个有跟踪活动指令的节中有链接:

<nav track-active>
     <a href="#/">Page 1</a>
     <a href="#/page2">Page 2</a>
     <a href="#/page3">Page 3</a>
</nav>

在我看来，这种方法比其他方法干净得多。

此外，如果你使用的是jQuery，你可以让它更整洁，因为jQlite只有基本的选择器支持。在angular include之前包含jquery的一个更简洁的版本是这样的:

myApp.directive('trackActive', function($location) {
    function link(scope, element, attrs){
        scope.$watch(function() {
            return $location.path();
        }, function(){
            element.find('a').removeClass('active').find('[href="#'+$location.path()+'"]').addClass('active');
        });
    }
    return {link: link};
});

这是一个jsFiddle

如果你想把指令的链接放在一个包装器中，而不是选择每个单独的链接(这样更容易查看Batarang中的作用域)，这也很有效:

  angular.module("app").directive("navigation", [
    "$location", function($location) {
      return {
        restrict: 'A',
        scope: {},
        link: function(scope, element) {
          var classSelected, navLinks;

          scope.location = $location;

          classSelected = 'selected';

          navLinks = element.find('a');

          scope.$watch('location.path()', function(newPath) {
            var el;
            el = navLinks.filter('[href="' + newPath + '"]');

            navLinks.not(el).closest('li').removeClass(classSelected);
            return el.closest('li').addClass(classSelected);
          });
        }
      };
    }
  ]);

加价就是:

    <nav role="navigation" data-navigation>
        <ul>
            <li><a href="/messages">Messages</a></li>
            <li><a href="/help">Help</a></li>
            <li><a href="/details">Details</a></li>
        </ul>
    </nav>

我还应该提到，我在这个例子中使用的是“全脂”jQuery，但你可以很容易地改变我所做的过滤等。

在我的例子中，我通过创建一个负责导航的简单控制器来解决这个问题

angular.module('DemoApp')
  .controller('NavigationCtrl', ['$scope', '$location', function ($scope, $location) {
    $scope.isCurrentPath = function (path) {
      return $location.path() == path;
    };
  }]);

只需像这样在元素中添加ng-class:

<ul class="nav" ng-controller="NavigationCtrl">
  <li ng-class="{ active: isCurrentPath('/') }"><a href="#/">Home</a></li>
  <li ng-class="{ active: isCurrentPath('/about') }"><a href="#/about">About</a></li>
  <li ng-class="{ active: isCurrentPath('/contact') }"><a href="#/contact">Contact</a></li>
</ul>