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

问题描述

请问AngularJS帮助以任何方式的链接设置的有效类当前页面？

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' : '';
}

通过此任务链接将在开头的任何URL活动类/tasks'(e.g。'/任务/ 1 /报告'）

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

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