Angular UI Router:ネストされたビューに移動するときに親ビューを「アクティブ」にするにはどうすればよいですか?
UIルーターを実装したプロジェクトに取り組んでおり、ui-sref-active="active"
は、その項目が現在のルートであるときにナビゲーションメニュー項目にアクティブなクラスを追加します。ただし、そのビュー内のネストされたビューに移動すると、親メニュー項目はアクティブではなくなります。次のPlunkerを参照してください。
http://plnkr.co/edit/2CoEdS?p=preview
デフォルトでは(またはクリックした場合)、ルート1は「アクティブ」です。 [リストの表示]をクリックすると、ルート1がアクティブでなくなっていることがわかります。
編集:
この例と実際のプロジェクトの唯一の違いは、実際のプロジェクトのナビゲーションメニューには独自のコントローラーがあるため、「route1」のコントローラーと同じスコープを使用しないことです。
EDIT更新されたui-router 0.2.13の場合:
ui-sref-active="active"
は、現在の状態がui-srefの状態または任意の子の場合に「アクティブ」クラスを設定するようになりました
ui-sref-active-eq="active"
は、ui-sref-activeの以前の反復として動作し、正確な状態のクラスのみを設定します
元の答え:
未解決のui-routerの問題を参照してください: https://github.com/angular-ui/ui-router/issues/704 および 818
一般的な回避策は次のとおりです。
ng-class="{active:$state.includes('route1')}"
もちろん、$ stateを$ scopeに追加する必要があります。更新されたプランクを参照してください: http://plnkr.co/edit/KHLDJP?p=preview
Ui-sref-active = "active"を誤って理解している
<li ui-sref-active="active"><a ui-sref="route1">Route 1</a></li>
これは、状態route1にあるときにのみ強調表示される特別なCSSを表示します(参照 https://github.com/angular-ui/ui-router/wiki/Quick-Reference#wiki-ui-sref-active =)。これは、ルート1をクリックした場合です。しかし、「リストを表示」をクリックすると、ルート1にいなくなります。むしろ、状態は「route1.list」です。これを確認するには、次のコードを記述します。これは、厳密に状態の仕組みを理解するためのものです。
js
内部コントローラー
$rootScope.currentState = $state.$current.name //using rootScope so that you can access the variable anywhere inside html
htmlの中
{{currentState}}
Ui-sref-activeのドキュメントをよく見ると、stateNameだけでなくstateParamsも調べているため、サブステートに移動してもcssは変更されません。ソースコードからより明確になります。
function update() {
if ($state.$current.self === state && matchesParams()) {
$element.addClass(activeClass);
} else {
$element.removeClass(activeClass);
}// route1===route1.list will not be true.
問題を解決するには、スコープ変数がネストされたビューで継承されることを覚えておいてください。
ルートの内部コントローラー。
$scope.route1Active = true;
hTMLで
<li ng-class={active:route1Active}><a ui-sref="route1">Route 1</a></li>
Angular UIルーターはこれをネイティブにサポートするようになりました。コミットを参照してください https://github.com/angular-ui/ui-router/commit/bf163ad6ce176ce28792696c8302d7cdf5c05a01
私の解決策は設定することでした:
<li ng-class="{ 'active': state.current.name.indexOf('route1') != -1 }">
状態は既にコントローラーのスコープに既に追加されています:
$scope.state = $state;
今、彼らは更新されており、それを行う新しい方法は
<a ui-sref-active="{'active': 'main.app.manage.**'}" ui-sref="main.app.manage.people.list"></a>
以下は状態ファイルです
angular.module('manage.people', ['people.invite'])
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('main.app.manage.people', {
url: '/people',
abstract: true,
cache: false,
views: {
'tabContent': {
template: '<div ui-view="peopleContent"></div>',
controller: 'peopleController'
}
}
})
.state('main.app.manage.people.list', {
url: '/list',
views: {
'peopleContent': {
templateUrl: '/internal/main/app/manage/people/views/people.html',
controller: 'peopleListController'
}
}
});
コントローラで何もする必要はありません。コードの例を次に示します。
<ul class="nav nav-pills nav-stacked" role="tablist">
<li ui-sref-active="active"><a ui-sref="Booking.Step1" href="#/Booking/Step1">Step1</a></li>
<li ui-sref-active="active"><a ui-sref="Booking.Step2" href="#/Booking/Step2" >Step2</a></li>
<li ui-sref-active="active"><a ui-sref="Booking.Step3" href="#/Booking/Step3">Step3</a></li>
<li ui-sref-active="active"><a ui-sref="Booking.Step4" href="#/Booking/Step4">Step4</a></li>
<li ui-sref-active="active"><a ui-sref="Booking.Step5" href="#/Booking/Step5">Step5</a></li>
</ul>
ルート構成:
$stateProvider.state('Booking', {
abstract: true,
url: '/Booking',
templateUrl: "TourApp/Templates/Booking/SideMenu.html",
controller: "SideMenuController"
});
$stateProvider.state('Booking.Step1', {
url: "/Step1",
views: {
'content': {
templateUrl: "TourApp/Templates/Booking/Step1.html",
controller: "Step1Controller"
}
}
});
$stateProvider.state('Booking.Step2', {
url: "/Step2",
views: {
'content': {
templateUrl: "TourApp/Templates/Booking/Step2.html",
controller: "Step2Controller"
}
}
});
「ハック」のないソリューションがすでにあります [〜#〜] here [〜#〜]
それが方法です:
HTML>
<li ui-sref-active="active" >
<a href="#" class="submenu" ui-sref="bands">
<i class="fa fa-location-arrow" aria-hidden="true"></i>
Bands
<span class="fa fa-chevron-down"></span>
</a>
<ul class="nav child_menu">
<li ui-sref-active="active">
<a ui-sref="bands.nirvana">
Nirvana
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="bands.iron">
Iron
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="bands.metalica">
Metalica
</a>
</li>
</ul>
ルーターの構成は次のようになります>
$stateProvider.state('bands', {
abstract: true,
url: '/bands',
templateUrl: "myapp/categories/template.bands.html", //<ui-view></ui-view>
controller: "SomeController as vm"
}).state('bands.nirvana', {
url: '/nirvana',
templateUrl: "myapp/categories/band.nirvana.html",
controller: "SomeController as vm"
}).state('bands.iron', {
url: '/iron',
templateUrl: "myapp/categories/band.iron.html",
controller: "SomeController as vm"
}).state('bands.meatlica', {
url: '/metalica',
templateUrl: "myapp/categories/band.metalica.html",
controller: "SomeController as vm"
})
2年後にここに来ましたが、質問されましたが、angular-ui-router
は、この問題を解決する上で非常に熟練したアプローチを持っています。ネストされた状態でも機能しました。
<ul>
<li ui-sref-active="active" class="item">
<a ui-sref="home">Home</a>
</li>
<!-- ... -->
</ul>
アプリがhome
状態に移動すると、結果のHTMLが表示されます:
<ul>
<li ui-sref-active="active" class="item active">
<a ui-sref="home">Home</a>
</li>
<!-- ... -->
</ul>
ui-sref-activeクイックリファレンス:
関連するui-srefディレクティブの状態がアクティブなときに要素にクラスを追加し、非アクティブなときにそれらを削除するために、ui-srefとともに動作するディレクティブ。主な使用例は、「アクティブ」状態のメニューボタンを非アクティブなメニュー項目と区別して表示することにより、ui-srefに依存するナビゲーションメニューの特別な外観を単純化することです。
私はこれがあなたが探していたものであることを願っています。リストクラスに親URLを配置すると、子クラスにナビゲートするたびに親クラスがアクティブになります
ステップ1:ナビゲーションバー用のコントローラーを追加するか、ナビゲーションバーが含まれる既存のコントローラーに次を追加します
app.controller('navCtrl', ['$scope', '$location', function($scope, $location) {
$scope.isActive = function(destination) {
return destination === $location.path();
}
}]);
Step2:ナビゲーションバーで
<li ng-class="{active: isActive('/home')}"><a ui-sref="app.home">Browse Journal</a></li>
それでおしまい。