Angular UI Router:ネストしたビューに移動するときに「アクティブ」に親ビューを「アクティブ」にするにはどうすればよいですか。
-
21-12-2019 - |
質問
UIルータを実装したプロジェクトに取り組んでいて、その項目が現在のルートの場合はナビゲーションメニュー項目にアクティブなクラスを追加するようにui-sref-active="active"
を使用しています。ただし、そのビュー内のネストされたビューに移動すると、親メニュー項目はアクティブになっていません。次のプランカー:
http://plnkr.co/edit/2coedss ?p=preview
デフォルトで(またはクリックした場合)Route 1は "Active"です。「表示リストを表示」をクリックすると、Route 1がアクティブではなくなったことがわかります。
編集:
この例とマイプロジェクトの違いは、実際のプロジェクトのナビゲーションメニューに独自のコントローラがあるため、「route1」のコントローラと同じ範囲を使用しないことです。
解決
更新されたUIルータ0.2.13の編集:
ui-sref-active="active"
現在の状態がUI-SREFの状態または任意の子
ui-sref-active-eq="active"
は、UI-SREFアクティブの前の反復として動作し、正確な状態のクラスのみを設定します。
元の答え:
Open 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>
.
これは、あなたが州ルート1(参照 https://github.com/angular-ui/ui-router/wiki/quick-reference#wiki-ui-sref-active )。これは、Route 1をクリックすると、「表示リストを表示」をクリックするとRoute1がもうありません。 むしろあなたは州 "route1.list"にいます。次のコードを書くことでこれを確認できます。これは州の職場を理解するための厳密にあります。
js
内部コントローラ
$rootScope.currentState = $state.$current.name //using rootScope so that you can access the variable anywhere inside html
.
HTML
内部{{currentState}}
.
UI-SREFアクティブのドキュメントを厳密に見れば、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ルータは現在このネイティブをサポートしています。commit https://github.com/angular-ui/ui-router/commit./ BF163AD6CE176CE28792696C8302D7CDF5C05A01
私の解決策は設定されました:
<li ng-class="{ 'active': state.current.name.indexOf('route1') != -1 }">
.
既に以前にコントローラの範囲に追加されました:
$scope.state = $state;
. コントローラに何かをする必要はありません。これが私の例のコードです:
<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"
}
}
});
. 今、それらは更新され、それをする新しい方法は
<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'
}
}
});
. 私たちはすでに「ハック」なしで解決策を持っていますここ
<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>
.
Appがhome
状態に移動すると、結果が結果が表示されるかです。
<ul>
<li ui-sref-active="active" class="item active">
<a ui-sref="home">Home</a>
</li>
<!-- ... -->
</ul>
.
UI-SREFアクティブクイックリファレンス:
UI-SREFに沿って作業するディレクティブワーククラスを要素に追加する 関連UI-SREFディレクティブの状態がアクティブで取り外したとき 非アクティブな場合主なユースケースは簡単にすることです 持つことによって、UI-SREFに頼るナビゲーションメニューの特別な外観 「アクティブな」状態のメニューボタンが異なるように見え、それを区別します 非アクティブメニュー項目から。
これがあなたが探していたものであることを願っています。リストクラスの親のURLをプレイスしてください。
ステップ1:Nav Barのコントローラを追加します。既存のコントローラが含まれている既存のコントローラが含まれている場合は、次の
を追加します。app.controller('navCtrl', ['$scope', '$location', function($scope, $location) {
$scope.isActive = function(destination) {
return destination === $location.path();
}
}]);
.
STEP2:NAV BAR
<li ng-class="{active: isActive('/home')}"><a ui-sref="app.home">Browse Journal</a></li>
.
それはそれを;