javascript - 如何使用 Angular JS 设置 Bootstrap 导航栏事件类？

Question

如果我在 Bootstrap 中有一个带有项目的导航栏

Home | About | Contact

如何在每个菜单项处于事件状态时为其设置事件类？也就是说，当 Angular 路由在

时，如何设置 class="active"

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

Answer 1

一种非常优雅的方式是使用 ng-controller 在 ng-view 之外运行单个 Controller :

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