角线菜单激活

Question

我想提前解释一下我的问题，对不起我的英语不好。

我已经用角度和角度路线编写了代码，我的导航栏在html中看起来像这样

<ul nav-menu>
    <li><a href="">Index</a></li>
    /*others*/
</ul>

和路由参数

    $routeProvider
        .when('/', {
            templateUrl: 'views/main.html',
            controller: 'mainCtrl' 
        })
        .when('/skills', {
            // others
        })

一切正常，但我的追求是：

路由已加载或处于活动状态时，如何为li元素设置一些CSS？

Answer 1

您在这里不仅要处理主题 。

1. 首先，看看ngClass 。 在那里，您可以将Angular逻辑放入类中，因此它随作用域值或函数返回而变化。
2. 因此，您必须处理通过控制器传递的范围和数据，或者取决于应用程序的结构。

对于第二个主题， 这是一个很好的SO问题/答案 ，很好地解释了它。

Answer 2

在angular UI中，有一个组件（Angular UI）用于检查路由当前是否处于活动状态：这是其文档中的示例： Angular-UI Utils

<a ui-route="/page" ng-class="{active: $uiRoute}">link</a>

它的简单含义是，当当前访问ui-route中的路由时 ，应该启用活动类。

如果您只想使用angular进行操作，则可以这样做。

<li><a ng-href="/home" ng-class="{'active: $location.path() ==='/home'}">Home</a></li>

Answer 3

使用Angular相当简单。

您可以如下所示为NavBar定义一个控制器，

<ul nav-menu ng-controller="NavbarCtrl">
    <li ng-class={active : isRouteActive("/home")}><a href="/home">Index</a></li>        
</ul>

然后，您的控制器应定义如下，

app.module("myApp",["ngRoute"])
  .controller("NavbarCtrl", function($scope, $location) {

   $scope.isRouteActive = function(route) { 
        var curRoute = $location.path();
        return curRoute.match(route);
    }

});

如果您使用的是UI Router，则只需添加以下属性，

<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>

当前状态匹配时，这将使该项目自动突出显示。

希望这可以帮助

〜拉吉什

Answer 4

在附加到菜单的控制器中，注入$state 。 这将提供有关您当前所处状态的信息。 ng-class="active: $state === actual_state_name"将设置活动类。 我想在注入之后您可以在视图中使用$ state，但是您需要自己检查它。

另一个解决方案，而不是角度的方式是获取javascript window对象。 类似的是$ location，whitch提供有关实际链接和其他出色功能的信息