如何确定 AngularJS 中的 path/route 以指示菜单中的当前视图

Question

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

我需要能够确定与当前视图关联的 path/route，以便我可以为我的 Boostrap Nav 链接设置 CSS class。

<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 -ng-show 在相同情况下评估为真。

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

Answer 1

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

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

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

在你的 HTML 中，将 true/false 值替换为 ng-class 中的函数，如下所示，

<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 模式（包括或不包括 #）而改变。

如何确定 AngularJS 中的 path/route 以指示菜单中的当前视图

How to determine path/route in AngularJS to indicate current view in menu

angularjs

twitter-bootstrap

angularjs-routing