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

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

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

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

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

指数

事件<活跃 ——事件列表 ——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;
};}

首先，这个问题可以用很多方法来解决。这种方式可能不是最优雅的，但它确实有效。

这里有一个简单的解决方案，你应该能够添加到任何项目。当你配置你的路由时，你可以添加一个“pageKey”或其他属性，你可以用它来关闭。另外，你可以在$route对象的$routeChangeSuccess方法上实现一个监听器来监听路由更改是否成功完成。

当您的处理程序触发时，您将获得页面键，并使用该键来定位需要为该页“ACTIVE”的元素，然后应用ACTIVE类。

Keep in mind you need a way to make ALL the elements "IN ACTIVE". As you can see i'm using the .pageKey class on my nav items to turn them all off, and I'm using the .pageKey_{PAGEKEY} to individually turn them on. Switching them all to inactive, would be considered a naive approach, potentially you'd get better performance by using the previous route to make only active items inactive, or you could alter the jquery selector to only select active items to be made inactive. Using jquery to select all active items is probably the best solution because it ensures everything is cleaned up for the current route in case of any css bugs that might have been present on the previous route.

这意味着要修改这行代码:

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

到这个

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

下面是一些示例代码:

给出一个引导导航条

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

以及一个角模块和控制器，如下所示:

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

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

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

这对我来说很管用:

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