如何使用Angular JS设置bootstrap navbar活动类？

Question

如果我在引导程序中有导航栏

Home | About | Contact

当每个菜单项处于活动状态时，如何设置它们的活动类？也就是说，class="active"当角度路线位于

1. #/ 回家
2. #/about 关于页面
3. #/contact 用于联系页面

Answer 1

一种非常优雅的方法是使用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();
    };
}