1. ホーム
  2. angularjs

[解決済み] Angular-ui-router: ui-sref-activeとネストされた状態

2023-06-16 22:12:03

質問

私は angular-ui-router とネストされた状態を使用しており、ナビゲーションバーもあります。ナビバーは手書きで ui-sref-active を使用して現在の状態をハイライトしています。これは 2 レベルのナビゲーション バーです。

さて、私が、例えば Products / Categories の両方が欲しいです。 Products (レベル 1 の場合) と Categories (レベル2)がハイライトされます。しかし ui-sref-active を使用すると、もし私が状態 Products.Categories にいる場合、その状態だけが強調表示され Products .

を作る方法はありますか? Products をその状態でハイライトさせる方法はありますか?

どのように解決するのですか?

この代わりに

<li ui-sref-active="active">
    <a ui-sref="posts.details">Posts</a>
</li>

こんなこともできるんだ

<li ng-class="{active: $state.includes('posts')}">
    <a ui-sref="posts.details">Posts</a>
</li>


現在、動作していません。ここで議論が行われている ( https://github.com/angular-ui/ui-router/pull/927 ) そして、近日中に追加される予定です。

UPDATEです。

これを動作させるために $state はビューで利用可能であるべきです。

angular.module('xyz').controller('AbcController', ['$scope', '$state', function($scope, $state) {
   $scope.$state = $state;
}]);

その他の情報

UPDATE [2]です。

バージョン 0.2.11 では、すぐに動作します。関連する問題をご確認ください。 https://github.com/angular-ui/ui-router/issues/818