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

发布时间：2020-12-17 23:01:13 所属栏目：安全来源：网络整理

导读：如果我有一个导航栏在引导与项目 Home | About | Contact 如何为活动的每个菜单项设置活动类？也就是说，当角路径在时，我如何设置class =“active” #/ for home #/ about的about页面联系人页面的#/联系人解决方法一个非常优雅的方法是使用ng-controller

如果我有一个导航栏在引导与项目

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();
    };
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!