[英]Angular routes & active links
I'm trying to make selected link on navigation bar highlighted based on current location in the url. 我正在尝试根据URL中的当前位置突出显示导航栏上的选定链接。 For that I have written following function in controller for navbar:
为此,我在navbar的控制器中编写了以下函数:
$scope.isActive = function(route) {
return route === $location.path();
};
and in html I have this: 和在HTML我有这个:
<li ng-class="{active: isActive('/admin')}"><a href="/admin">Admin</a></li>
This works well for simple url but does not perform well for urls with id and subpaths. 这对于简单的url效果很好,但对带有id和子路径的url效果不好。 I mean if I have url as 'item/:id' it does not match in isActive function and does not get highlighted, also I want to highlight same
li
for multiple sub routes like item
menu should be highlighted for items
& items/:id
& items/my
. 我的意思是,如果我将URL作为“ item /:id”使用,则它在isActive函数中不匹配并且未突出显示,我也想针对多个子路线突出显示同一个
li
,例如应该针对items
& items/:id
突出显示item
菜单和items/my
。 Any idea how can I achieve this? 知道我该如何实现吗?
try this 尝试这个
<li ng-class="{isActive('/admin')? 'active' : ''}"><a href="/admin">Admin</a></li>
or 要么
$scope.getActiveClass = function(route) {
return (route === $location.path())? 'active' : '';
};
//in directive
<li ng-class="getActiveClass ('/admin')"><a href="/admin">Admin</a></li>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.