Angular md-nav-bar反映当前路线

时间:2016-10-13 09:40:17

标签: angularjs

我使用以下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>

我希望导航栏反映当前网址的路由,因此如果网址为http://somewhere/#/howitworks,则应突出显示第二个md-nav-item。到目前为止,我无法找到如何去做。

3 个答案:

答案 0 :(得分:1)

(我无法发表评论,因此我必须将此作为回复发布)

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

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

如果你喜欢像我一样使用md-selected-nav-item,你可以向控制器添加一个函数,从哈希中提取选项卡的名称:

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

然后您可以通过这种方式在视图中使用它:

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

答案 1 :(得分:0)

考虑使用 ui-sref-active

例如,我们有称为home,about和contact的州。如果我们想在状态为活动状态时为每个活动类添加活动类,我们只需执行以下操作:

<ul>
    <li><a ui-sref="home" ui-sref-active="active">Home</a></li>
    <li><a ui-sref="about" ui-sref-active="active">About</a></li>
    <li><a ui-sref="contact" ui-sref-active="active">Contact</a></li>
</ul>

现在,如果当前状态与ui-sref中的状态匹配,则ui-sref-active中提供的类将激活。然后我们可以根据自己的内心设计风格。

md-nav-sref 转换为ui-sref,如docs

中所示

答案 2 :(得分:0)

徘徊了一段时间后,我想到了这个解决方案。
希望它将来能对某人有所帮助。

##解决方案:捕获过渡事件
环境:

Angularjs: v1.7.6
Angular-ui-route: v1.0.20

在html中:

<div ng-cloak ng-controller="navCtrl as $ctrl">    
<md-nav-bar md-selected-nav-item="$ctrl.currentNavItem">
                <md-nav-item md-nav-sref="client.TopPage" name="client.TopPage”>TOP PAGE</md-nav-item>
                <md-nav-item md-nav-sref="client.SecondPage" name="client.SecondPage”>SECOND PAGE</md-nav-item>
            </md-nav-bar>
</div>

在controller.js中:

navController.$inject = ['$state', '$transitions']
   function navController($state,$transitions){
        var $ctrl = this;    

        // Catch change state event and update
        $transitions.onSuccess({}, function() {
            $ctrl.currentNavItem = $state.current.name;
        });
    }