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

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将被应用到所选的选项卡。

扩展我的答案，我需要这个来处理这样的结构。

指数

事件<活跃 ——事件列表 ——event-edit ——事件映射<点击

——这 ——place-list ——place-edit ——place-map

所以不是匹配，我必须使用indexOf，以验证子链接的格式匹配条件。对于'events':

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

这对我来说很管用:

  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)添加类active

$('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是'应用程序'，它将是活跃的

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

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

并包含在controllers.js中:

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

你也可以使用active-link指令https://stackoverflow.com/a/23138152/1387163

当location匹配/url时，父类li将获得活动类:

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