如何突出显示当前菜单项? [英] How to highlight a current menu item?

问题描述

AngularJS 是否有助于在当前页面的链接上设置 active 类?

Does AngularJS help in any way with setting an active class on the link for the current page?

我想这是一种神奇的方式，但我似乎找不到.

I imagine there is some magical way this is done, but I can't seem to find.

我的菜单看起来像:

 <ul>
   <li><a class="active" href="/tasks">Tasks</a>
   <li><a href="/actions">Tasks</a>
 </ul>

并且我的路由中的每个控制器都有控制器:TasksController 和 ActionsController.

and I have controllers for each of them in my routes: TasksController and ActionsController.

但我不知道如何将 a 链接上的活动"类绑定到控制器.

But I can't figure out a way to bind the "active" class on the a links to the controllers.

有什么提示吗?

推荐答案

查看中

<a ng-class="getClass('/tasks')" href="/tasks">Tasks</a>

在控制器上

$scope.getClass = function (path) {
  return ($location.path().substr(0, path.length) === path) ? 'active' : '';
}

有了这个，任务链接将在任何以/tasks"开头的网址中包含活动类(例如/tasks/1/reports")

With this the tasks link will have the active class in any url that starts with '/tasks'(e.g. '/tasks/1/reports')

这篇关于如何突出显示当前菜单项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！