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

StackOverflow https://stackoverflow.com//questions/22054391

質問

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'
          }
        }
      });
.

私は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>
.

それはそれを;

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top