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

本文介绍了如何使用Angular JS设置bootstrap navbar活动类？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

class =active

＃/ for home

＃/ about for about页面

＃/ contact 联系页面

#/ for home
#/about for the about page
#/contact for the contact page

推荐答案

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

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>

并包含在controllers.js中：

and include in controllers.js:

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

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