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

前端之家收集整理的这篇文章主要介绍了如何设置bootstrap navbar活动类与Angular JS?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如果我有一个导航栏在引导与项目
Home | About | Contact

如何为活动的每个菜单项设置活动类?也就是说,当角路径在时,我如何设置class =“active”

>#/ for home
>#/ about的about页面
>联系人页面的#/联系人

解决方法

一个非常优雅的方法是使用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();
    };
}

猜你在找的Bootstrap相关文章