web-dev-qa-db-ja.com

Angular UI Router：ネストされたビューに移動するときに親ビューを「アクティブ」にするにはどうすればよいですか？

UIルーターを実装したプロジェクトに取り組んでおり、ui-sref-active="active"は、その項目が現在のルートであるときにナビゲーションメニュー項目にアクティブなクラスを追加します。ただし、そのビュー内のネストされたビューに移動すると、親メニュー項目はアクティブではなくなります。次のPlunkerを参照してください。

http://plnkr.co/edit/2CoEdS?p=preview

デフォルトでは（またはクリックした場合）、ルート1は「アクティブ」です。 [リストの表示]をクリックすると、ルート1がアクティブでなくなっていることがわかります。

編集：

この例と実際のプロジェクトの唯一の違いは、実際のプロジェクトのナビゲーションメニューには独自のコントローラーがあるため、「route1」のコントローラーと同じスコープを使用しないことです。

angularjsangular-uiangular-ui-router
19
Ian Walter

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

60
Chris T

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>
8
himangshuj

Angular UIルーターはこれをネイティブにサポートするようになりました。コミットを参照してください https://github.com/angular-ui/ui-router/commit/bf163ad6ce176ce28792696c8302d7cdf5c05a01

5
Kenneth Lynne

私の解決策は設定することでした：

<li ng-class="{ 'active': state.current.name.indexOf('route1') != -1 }">

状態は既にコントローラーのスコープに既に追加されています：

$scope.state = $state;
4
Ian Walter

今、彼らは更新されており、それを行う新しい方法は

 <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'
          }
        }
      });
2
Siddharth Pandey

コントローラで何もする必要はありません。コードの例を次に示します。

    <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"
            }
        }
    });
2
Yang Zhang

「ハック」のないソリューションがすでにあります [〜＃〜] 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"
})
1
davidwillianx

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に依存するナビゲーションメニューの特別な外観を単純化することです。

完全なドキュメント

1
BeingSuman

私はこれがあなたが探していたものであることを願っています。リストクラスに親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>

それでおしまい。

0
user6664928