角度路线和活动链接答案

【问题标题】：Angular routes & active links角度路线和活动链接
【发布时间】：2014-11-28 04:53:14
【问题描述】：

我正在尝试根据 url 中的当前位置突出显示导航栏上的选定链接。为此，我在导航栏控制器中编写了以下函数：

$scope.isActive = function(route) {
  return route === $location.path();
};

在 html 中我有这个：

<li ng-class="{active: isActive('/admin')}"><a href="/admin">Admin</a></li>

这适用于简单的 url，但对于具有 id 和子路径的 url 效果不佳。我的意思是，如果我的 url 为 'item/:id' 它在 isActive 函数中不匹配并且不会突出显示，我还想为多个子路由突出显示相同的li item 菜单应该突出显示@987654326 @ & items/:id & items/my。知道如何实现吗？

【问题讨论】：

请试试这个answer，这里解释了如何使用 UI-Router 解决 active 链接的所有细节...
@RadimKöhler 让我检查并尝试一下。
@RadimKöhler 您正在演示 <a> 标签，但我想更改 <li> 标签的类，但尝试时它不起作用。
只是想给你一个提示，“标准” UI-Router 解决方案是如何设计的...... ;) 因为据我记得（从我的剧本......）它可以应用在 LI 上也是如此，只需 ui-sref 就位...
@RadimKöhler 好的，我在这里和那里更新了一些位，现在它有点工作了。唯一的问题是我不能直接进入抽象状态。我的意思是我已经在 ui-sref 中提供了抽象状态 ID，因此每次选择子状态时它都会突出显示，但是当我单击该链接时，它会给出类似 Cannot transition to abstract state 'item' 的错误

标签： javascript jquery angularjs angular-ui-router

【解决方案1】：

试试这个

<li ng-class="{isActive('/admin')? 'active' : ''}"><a href="/admin">Admin</a></li>

或

$scope.getActiveClass = function(route) {
  return (route === $location.path())? 'active' : '';
};


//in directive
<li ng-class="getActiveClass ('/admin')"><a href="/admin">Admin</a></li>

【讨论】：

对于简单的路线，它已经在工作了。我想让它适用于复杂和子路线。
子路由可以使用正则表达式