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

您必须在此处理主题。

首先，看看ngClass。在那里你可以将Angular逻辑放在类中，因此它会随着范围值或更改而改变   函数返回。

因此，您必须通过控制器处理传递范围和数据，或者根据应用程序的结构来处理。

对于第二个主题，here is a good SO question/answer可以很好地解释它。

Answer 2

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

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

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

如果你只想使用角度来做，你可以这样做。

<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路由器，只需添加如下所示的属性

即可

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

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

希望这有帮助

〜Ragesh

Answer 4

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

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

角度路线菜单有效

4 个答案: