小编典典

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

javascript

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

Home | About | Contact

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

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

阅读 314

收藏
2020-05-01

共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();
    };
}
2020-05-01