这里有另一个解决方案，谁可能感兴趣。这样做的好处是它的依赖关系更少。见鬼，它也可以在没有网络服务器的情况下工作。所以这完全是客户端的。

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>

解释:

这里我们使用ng-repeat指令从angularjs模型动态生成链接。在控制器中为下面的导航栏定义的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 : "";
    };
});

解释:

使用ng-click指令调用selectTab()方法。因此，当单击链接时，变量selectedTab被设置为该链接的名称。在HTML中，您可以看到这个方法在没有任何Home选项卡参数的情况下被调用，以便在页面加载时突出显示它。

getTabClass()方法是通过HTML中的ng-class指令调用的。这个方法检查它所在的选项卡是否与selectedTab变量的值相同。如果为真，则返回"active"，否则返回""，它被ng-class指令应用为类名。然后，你应用到active类的css将被应用到所选的选项卡。

你可以在角表达式中使用条件来实现这一点，例如:

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

话虽如此，我确实发现angular指令是更“合适”的方式，即使外包大量这种微型逻辑会在一定程度上污染你的代码库。

在开发过程中，我每隔一段时间就会使用条件来进行GUI样式化，因为这比创建指令要快一些。但我无法告诉你一个实例，它们实际上在代码库中保留了很长时间。最后，我要么把它变成一个指令，要么找到一个更好的方法来解决问题。

这是一个很长的回答，但我想分享我的方法:

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

结合@Olivier的AngularStrap回答，我也实现了kevinknelson的回答:https://github.com/twbs/bootstrap/issues/9013。

Bootstrap3导航栏本来就不是为单页面(比如Angular)应用设计的，因此当菜单在小屏幕上时，点击时不会崩溃。

我觉得这些答案对我来说有点太复杂了，抱歉。所以我创建了一个小指令，应该在每个导航条的基础上工作:

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>

如果你不愿意使用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