AngularJSで現在のビューを示すパス/ルートを決定する方法

Question

私はブートストラップを使用する小さな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は、現在表示されているビューと一致した場合にtrueと評価される式であることをLI要素のデータ-NG-クラスの「真/偽」の値を置き換えたい、ともデータ-NG -showは同じ状況下で真と評価します。

これを達成するための最善の方法はありますか？

Answer 1

私はそれを達成する他の方法はないと思います。以下は仮のコードです。

一度あるかどうか確認してください

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

、次のように ng-classに機能して true/false値を置き換える、次のようにあなたのコントローラで isActive()を言うあなたのHTMLで

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

を機能を追加$location.path()がコントローラに戻り、HTMLコードのisActive()関数の引数の値を変更しています。 html5モードを使用しているかどうかに応じて変更されます（#を含むかどうか）。