如何实现与角JS引导导航栏活动类 [英] How do I implement the bootstrap navbar active class with Angular JS

问题描述

如果我有一个自举导航栏的项目

 首页|关于我们|联系
 

我如何设置每个菜单项的活动类的时候都活跃？也就是说，我怎么可以设置类=活跃当角路线是在

1. ＃/ 产品


2. ＃/约的有关网页


3. ＃/联系人联系人页

解决方案

一个非常优雅的方式是使用NG-控制器到NG-视图之外运行单个控制器：

 ＆LT; D​​IV CLASS =导航栏崩崩NG控制器=HeaderController＆GT;
    ＆LT; UL类=NAV导航栏，导航＆GT;
        ＆LT;李纳克级={活跃：isActive（'/'）}＆GT;＆LT; A HREF =/＆GT;首页＆LT; / A＆GT;＆LT; /李＆GT;
        ＆LT;李纳克级={活跃：isActive（'/狗'）}＆GT;＆LT; A HREF =/狗＆GT;狗＆LT; / A＆GT;＆LT; /李＆GT;
        ＆LT;李纳克级={活跃：isActive（'/猫'）}＆GT;＆LT; A HREF =/猫＆GT;猫＆LT; / A＆GT;＆LT; /李＆GT;
    ＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV NG-视图＆gt;＆LT; / DIV＆GT;
 

和包括controllers.js：

 函数HeaderController（$范围，$位置）
{
    $ scope.isActive =功能（viewLocation）{
        返回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();
    };
}

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