角度路线菜单处于活动状态 [英] 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屋！