web-dev-qa-db-ja.com

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を強調表示する方法はありますか？

angularjsangular-ui-router
82
paj28

これの代わりに-

<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

138
Rifat

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

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

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

28
Donutself

これが解決策です。

<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>
17
Holland Risley

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('/');
    });
10
Edan Chetrit

とても簡単、ステップ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>

それでおしまい。

2
user6664928

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 app：https://github.com/vineetsagar7/Angualr-UI-Router

0
vineet sagar

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

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

<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ナビゲーションボタンがアクティブのままになります

0
C Rudolph

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

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

My Nav Link-

<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;
                }
            });
0
Aditya Gupta