感谢@Pylinux。我使用了他的技术，并对其进行了修改，以支持“一级”下拉菜单(sub ul/li)，因为这是我所需要的。在下面的小提琴链接中看到它的实际操作。

根据pylinux的答案- http://jsfiddle.net/abhatia/en4qxw6g/更新了Fiddle

为了支持一级下拉菜单，我做了以下三个修改: 1. 为li下的“a”元素添加了一个类值dd(下拉)，该元素需要有子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;}

希望这将有助于有人寻求实现单级下拉菜单。

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

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

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

这里有一个简单的解决方案，你应该能够添加到任何项目。当你配置你的路由时，你可以添加一个“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>

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

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

你可以在文档中找到更多的信息。

以下是我的看法。在这篇文章中找到了一些答案的组合。我有一个稍微不同的情况下，所以我的解决方案涉及到分离菜单到自己的模板，在指令定义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/>

希望这能有所帮助