如何使用 Angular JS 设置引导导航栏活动类? [英] How to set bootstrap navbar active class with Angular JS?

问题描述

如果我在引导程序中有一个带有项目的导航栏

首页 |关于 |接触

如何在每个菜单项处于活动状态时为其设置活动类?也就是说，当角度路线在

时如何设置 class="active"

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

解决方案

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

<ul class="nav navbar-nav"><li ng-class="{ active: isActive('/')}"><a href="/">首页</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>
<div ng-view></div>

并包含在controllers.js中:

function HeaderController($scope, $location){$scope.isActive = 函数(视图位置){返回 viewLocation === $location.path();};}

If I have a navbar in bootstrap with the items

Home | About | Contact

How do I set the active class for each menu item when they are active? That is, how can I set class="active" when the angular route is at

1. #/ for home
2. #/about for the about page
3. #/contact for the contact page

解决方案

A very elegant way is to use ng-controller to run a single controller outside of the 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>

and include in controllers.js:

function HeaderController($scope, $location) 
{ 
    $scope.isActive = function (viewLocation) { 
        return viewLocation === $location.path();
    };
}

这篇关于如何使用 Angular JS 设置引导导航栏活动类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！