如何在AngularJS中确定路径/路线以指示菜单中的当前视图

Question

我正在编写一个使用Bootstrap的小AngularJS应用。 我正在使用Boostraps Nav组件，我想突出显示当前页面的菜单项。

我需要能够确定与当前视图关联的路径/路线，以便为Boostrap Nav链接设置CSS类。

<ul class="nav navbar-nav">
    <li data-ng-class="{'active': true}">
        <a href="#">Home <span class="sr-only" data-ng-show="false">(current)</span></a>
    </li>
    <li data-ng-class="{'active': false}">
        <a href="#/about">About Us <span class="sr-only" data-ng-show="false">(current)</span></a>
    </li>
    <li data-ng-class="{'active': false}">
        <a href="#/services">Services <span class="sr-only" data-ng-show="false">(current)</span></a>
    </li>
    <li data-ng-class="{'active': false}">
        <a href="#/testimonials">Testimonials <span class="sr-only" data-ng-show="false">(current)</span></a>
    </li>
    <li data-ng-class="{'active': false}">
        <a href="#/contact">Contact <span class="sr-only" data-ng-show="false">(current)</span></a>
    </li>
</ul>

我想将LI元素的data-ng-class中的“ true / false”值替换为一个表达式，当LI匹配当前显示的视图时，该表达式的计算结果为true，并且data-ng-show在以下条件下的计算结果为true同样的情况。

那是实现这一目标的最佳方法吗？

Answer 1

我认为没有其他方法可以实现这一目标。 以下是暂定代码。

在控制器中添加一个名为isActive()的函数，如下所示：

$scope.isActive = function (route) {
    return route === $location.path();
};

在您的HTML中，用ng-class的函数替换true/false值，如下所示：

<ul class="nav navbar-nav">
    <!-- use the `isActive()` function here in `ng-class` -->
    <li data-ng-class="{'active': isActive('/')}">
        <a href="#">Home <span class="sr-only" data-ng-show="false">(current)</span></a>
    </li>
   <li data-ng-class="{'active': isActive('/about')}">
       <a href="#/about">About Us <span class="sr-only" data-ng-show="false">(current)</span></a>
    </li>

    ...
</ul>

一旦检查了控制器中返回的$location.path()是什么，并在HTML代码中更改isActive()函数的参数值。 它将根据您是否使用html5模式（是否包含# ）而变化。