角度路线菜单处于活动状态 [英] Angular route menu active
问题描述
我尝试提前解释我的问题,抱歉我的英语不好.
I try to explain my problem in advance sorry for my bad english.
我编写了带有角度和角度路线的代码我的导航栏在 html 中看起来像这样
I have written code with angular and angular route My navbar looks like this in html
<ul nav-menu>
<li><a href="">Index</a></li>
/*others*/
</ul>
和路由参数
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'mainCtrl'
})
.when('/skills', {
// others
})
一切正常,但我的问题是:
Everything works perfectly but my questin is:
当路由已加载或处于活动状态时,如何为我的 li
元素设置一些 css?
How can I set some css to my li
element when route has been loaded or active?
推荐答案
使用 Angular 这很容易.
This is pretty easy with Angular.
您可以为导航栏定义一个控制器,如下所示,
You can define a controller for the NavBar as below,
<ul nav-menu ng-controller="NavbarCtrl">
<li ng-class={active : isRouteActive("/home")}><a href="/home">Index</a></li>
</ul>
那么你的控制器应该定义如下,
Then your controller should defined as below,
app.module("myApp",["ngRoute"])
.controller("NavbarCtrl", function($scope, $location) {
$scope.isRouteActive = function(route) {
var curRoute = $location.path();
return curRoute.match(route);
}
});
如果您使用的是 UI 路由器,只需添加如下属性即可,
If you are using UI Router it's just a matter of adding an attribute like below,
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="home">Home</a></li>
<li ui-sref-active="active"><a ui-sref="about">About</a></li>
</ul>
这将使当前状态匹配时自动突出显示该项目.
This will make the item highlighted automatically when the current state matches.
希望能帮到你
~拉格什
这篇关于角度路线菜单处于活动状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!