Angular-ui-router：ui-sref-activeおよびネストされた状態

私が使用しています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）そして、まもなく追加されます。

更新：

これが機能するために$stateは、ビューで利用可能である必要があります。

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

より詳しい情報

更新[2]：

バージョンの時点で0.2.11、それは箱から出して動作します。関連する問題を確認してください：https：//github.com/angular-ui/ui-router/issues/818

階層的に関連していない複数の状態をネストしていて、ビューで使用できるコントローラーがない場合のオプションは次のとおりです。UI-RouterフィルターincludedByStateを使用して、現在の状態を任意の数の名前付き状態と照合できます。

<a ui-sref="production.products" ng-class="{active: ('production.products' | 
includedByState) || ('planning.products' | includedByState) || 
('production.categories' | includedByState) || 
('planning.categories' | includedByState)}">
  Items
</a>

TL; DR：複数の無関係な名前付き状態は、同じリンクにアクティブクラスを適用する必要があり、コントローラーがありませんか？includeByStateを使用します。

これが解決策です：

<li class="myNonActiveStyle" ui-sref-active="myActiveStyle">
     <a ui-sref="project.details">Details</a>
</li>

編集：

上記は正確なルートパスに対してのみ機能し、ネストされたルートにactiveStyleを適用しません。このソリューションはこれで機能するはずです：

<a data-ui-sref="root.parent" data-ng-class="{ active: $state.includes('root.parent') }">Link</a>

URLツリーが次のようになっているとしましょう。

app (for home page) -> app.products -> app.products.category

使用法：

<li ui-sref-active="active">
    <a ui-sref="app.products">Products</a>
</li>

ここで、products：を押すと、製品のみがアクティブになります。

を押すとcategory：製品とカテゴリの両方がアクティブになります。

カテゴリのみを押してアクティブにしたい場合ui-sref-active-eqは、製品に：を使用する必要があります。これは、カテゴリのみがアクティブになり、子ではないことを意味します。

app.jsでの適切な使用：

angular.module('confusionApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
        $stateProvider

            // route for the home page
            .state('app', {
                url:'/',
                views: { ... }
            })

            // route for the aboutus page
            .state('app.products', {
                url:'products',
                views: { ... }
            })

            // route for the contactus page
            .state('app.products.category', {
                url:'category',
                views: { ... }
            })

        $urlRouterProvider.otherwise('/');
    });

とても簡単、ステップ1：ナビゲーションバー用のコントローラーを追加するか、ナビゲーションバーが含まれている既存のコントローラーに次を追加します

app.controller('navCtrl', ['$scope', '$location', function($scope, $location) {
        $scope.isActive = function(destination) {
        return destination === $location.path();
    }

}]);

ステップ2：ナビゲーションバーで

<li ng-class="{active: isActive('/home')}"><a ui-sref="app.home">Browse Journal</a></li>

それでおしまい。

UIルーター。ナビゲーションバーをアクティブにするコードスニペット。

HTML

<li ui-sref-active="is-active" ui-nested><a ui-sref="course">Courses</a>
</li> <li ui-sref-active="is-active" ui-nested><a ui-sref="blog">blog</a></li>

CSS

is-active{
      background-color: rgb(28,153,218);
}

courseView.HTMLの内部

<button type="button" ui-sref="blog" class="btn btn-primary">Next</button>

このボタンはコースビュー内にあり、次のビュー、つまりブログに移動します。ナビゲーションバーが強調表示されます。

同様の例、デモのAngular ui-routerアプリを見つけてください：https：//github.com/vineetsagar7/Angualr-UI-Router

私のコードは/ productGroupsから/ productPartitionsに移動しました。これは、「productPartitions」ビューにアクセスする唯一の方法です。

そこで、ui-sref-activeを持つ同じリストアイテム内にui-srefも「productPartitions」に設定された非表示のアンカーを追加しました

<li ui-sref-active="active">
     <a ui-sref="productGroups">
     <i class="fa fa-magic"></i> Product groups </a>
     <a ui-sref="productPartitions" style="display:none;"></a>
</li>

これで、いずれかのビューにアクセスするときに、productGroupsナビゲーションボタンがアクティブなままになります。

ここで私が同じことを達成するためにしたこと。親の状態は「app.message」であり、抽象として宣言しません。

子の状態は、「app.message.draft」、「app.message.all」、「app.message.sent」です。

私のナビゲーションリンク-

<a ui-sref-active="active-menu" ui-sref="app.message">Messages</a>

お子様のルート/リンクを定義します。

config-で更新します

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
                if (toState.name === 'app.message') {
                    event.preventDefault();
                    $state.go('app.message.draft');
                    return;
                }
            });