如果我在 Bootstrap 中有一个带有项目的导航栏
Home | About | Contact
如何在每个菜单项处于事件状态时为其设置事件类?也就是说,当 Angular 路由在
时,如何设置class="active"
#/
用于家庭#/about
用于关于页面#/contact
联系页面
最佳答案
一种非常优雅的方式是使用 ng-controller 在 ng-view 之外运行单个 Controller :
<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();
};
}
关于javascript - 如何使用 Angular JS 设置 Bootstrap 导航栏事件类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16199418/