2013-06-20 28 views
83

AngularUIのルーティングを使用していますが、ng-class="{active: current.state}"を実行したいと思いますが、このような指示文で現在の状態を正確に検出する方法は不明です。指示内の現在の状態を検出する方法

答えて

110

はまた、あなたはUI-SREFアクティブディレクティブを使用することができます

0

、具体的には、ルートのチェックの角度-UIをチェックアウト:更新 http://angular-ui.github.io/ui-utils/

+0

現在の状態を確認しようとしていますが、必ずしもルートではありません – Webnet

142

を:

この答えはUI-ルータの多くの古いリリースのためでした。より最近のリリース(0.2.5以上)では、ヘルパーディレクティブui-sref-activeを使用してください。詳細here


オリジナル回答:

は、コントローラで$状態サービスが含まれます。このサービスは、スコープ内のプロパティに割り当てることができます。

例:

$state.includes('stateName'); 

このメソッドが返す:状態が現在アクティブであるかどう

$state.current.name 

を確認するには:

$scope.$state = $state; 

は、その後、あなたのテンプレートで現在の状態を取得します状態が含まれている場合は、それがネストされた状態の一部であってもtrueです。ネストされた状態のuser.detailsで、​​をチェックした場合、trueを返します。あなたのクラスの例では

は、あなたがこのような何かをしたい:

<ul> 
    <li ui-sref-active="active" class="item"> 
    <a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a> 
    </li> 
    <!-- ... --> 
</ul> 

またはフィルタ: "stateName" | isState &

ng-class="{active: $state.includes('stateName')}" 
+3

パラメータを持つ状態はどうでしょうか? –

+3

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stateincludesstatename--params –

22

ui-routerを使用している場合は、$ state.is()を試してください。

あなたがそうのようにそれを使用することができます:

$state.is('stateName');

Documentation

0

私のために働いたUI-SREFアクティブ指示されたの使用:として

<li ui-sref-active="{'active': 'admin'}"> 
    <a ui-sref="admin.users">Administration Panel</a> 
</li> 

「tgrant59は2016年5月31日にコメントされました」というコメントの下にhereが見つかりました。

私はangle-ui-router v0.3.1を使用しています。

関連する問題