angularjs - Angular md-nav-bar 反射(reflect)当前路线

Question

我使用以下 md-nav-bar:

<md-nav-bar md-selected-nav-item="currentNavItem" aria-label="nav">
    <md-nav-item md-nav-href="#/overview" name="overview">Übersicht</md-nav-item>
    <md-nav-item md-nav-href="#/howitworks" name="howitworks">So funktioniert's</md-nav-item>
    <md-nav-item md-nav-href="#/startnow" name="startnow">Jetzt loslegen</md-nav-item>
</md-nav-bar>

我希望导航栏反射(reflect)当前 URL 的路径，所以如果 URL 是 http://somewhere/#/howitworks第二个 md-nav-item 应该突出显示。到目前为止，我还不知道如何去做。

Answer 1

(我不能发表评论，所以我必须发表这个作为回应)

$location.path() 不适合你，因为路径没有改变，但散列(# 之后的部分)。您必须改用 $location.hash()。

ng-class="{YOUR_CLASS: $location.hash() === 'YOUR_PATH'}"

如果您像我一样喜欢使用md-selected-nav-item，您可以向 Controller 添加一个函数以从散列中提取选项卡的名称:

this.getTabName() {
    return $location.hash().replace(/(^#\/|\/$)/g, '');
}

然后您可以在您的 View 中以这种方式使用它:

<md-nav-bar md-selected-nav-item="getTabName()" aria-label="nav">
    <md-nav-item md-nav-href="#/overview" name="overview">Übersicht</md-nav-item>
    <md-nav-item md-nav-href="#/howitworks" name="howitworks">So funktioniert's</md-nav-item>
    <md-nav-item md-nav-href="#/startnow" name="startnow">Jetzt loslegen</md-nav-item>
</md-nav-bar>