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

Question

如何使用Angular JS设置bootstrap navbar活动类？如果我在引导程序中有一个带有项目的导航栏Home | About | Contact如何为每个菜单项激活时设置活动类？也就是说，如何设置class="active"角度路径的时间#/ 为了家#/about 对于关于页面#/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();
    };}