angularjs ui.router activestate with dropdown

Question

私は、アプリケーション内の複数のリンクのドロップダウンメニューを作成しようとしています。

以下のリンクの1つがアクティブな間、「アクティブ」になっています。

私がアクティブになるように私のドロップダウンにリンクを持って、私はアクティブにするドロップダウンを得たが、私はそれらの両方が一緒に作業していない飽きない...一つだけが動作している...

ここではコードです、誰かが私に何か間違っていることを指摘することができれば！

<li class="dropdown" ui-sref-active-eq="active"> 
    <a class="dropdown-toggle" data-toggle="dropdown"> 
     Main 
     <span class="caret"></span> 
    </a> 

    <ul class="dropdown-menu"> 
     <li ui-sref-active="active"> 
      <a ui-sref="Debut1"> 
       Items 
      </a> 
     </li> 
    </ul> 
</li> 

ここでEDIT

は問題 https://plnkr.co/edit/Ffe9FLz4TuihkVjby6RU

ANSWER

app.js

var app = angular.module('app', [ 
    'ui.router' 
]); 

app.config([ 
    '$stateProvider', 
    '$urlRouterProvider', 
    function ($stateProvider, $urlRouterProvider) { 
     var accueil = { 
      name: 'accueil', 
      url: '/Accueil', 
      templateUrl: '/app/views/accueil/accueil.html' 
     } 

     var debutant = { 
      name: 'debut', 
      url: '/Debut', 
      abstract: true, 
      templateUrl: '/app/views/debut/debut.html' 
     } 

     var debutant1 = { 
      name: 'debut.one', 
      url: '/One', 
      parent: debutant, 
      templateUrl: '/app/views/debut/debut1.html' 
     } 

     var debutant2 = { 
      name: 'debut.two', 
      url: '/Two', 
      parent: debutant, 
      templateUrl: '/app/views/debut/debut2.html' 
     } 

     $stateProvider.state(accueil); 
     $stateProvider.state(debutant); 
     $stateProvider.state(debutant1); 
     $stateProvider.state(debutant2); 
     $urlRouterProvider.otherwise('/Accueil'); 
    } 
]); 

index.htmlを

を示しplunkrです

<div class="collapse navbar-collapse"> 
    <ul class="nav navbar-nav"> 
     <li ui-sref-active="active"> 
      <a ui-sref="accueil"> 
       Accueil 
      </a> 
     </li> 

     <li class="dropdown" ui-sref="debut" ui-sref-active="active"> 
      <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
       Début 
       <span class="caret"></span> 
      </a> 

      <ul class="dropdown-menu"> 
       <li ui-sref-active="active"> 
        <a ui-sref="debut.one"> 
         Début 1 
        </a> 
       </li> 

       <li ui-sref-active="active"> 
        <a ui-sref="debut.two"> 
         Début 2 
        </a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

debut.html

<div ui-view></div> 

Answer 1

私は数日後、私の問題の本当の解決策を見つけました。

@John Spiteriのソリューションでコンソールエラーが発生したためです。

UI--SREFアクティブ= "{ 'アクティブ'： 'デビュー**'}"

だから解決策はこの部分である

<li class="dropdown" ui-sref-active="{'active': 'debut.**'}"> 
    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
     Début 
     <span class="caret"></span> 
    </a> 

    <ul class="dropdown-menu"> 
     <li ui-sref-active="active"> 
      <a ui-sref="debut.one"> 
       Début 1 
      </a> 
     </li> 
    </ul> 
</li> 

に私の見解を切り替えます。**は親の子と一致します！

Answer 2

UI-SREF-アクティブは、すべての子ルートのアクティブなままになります...問題は、UI-ルータの実装です。

私は論理的にルートチェインを考えると、このようになります。

'/' = 'app.inventory' //抽象的：真 - おそらく共有し解決するか、データ
'/在庫/' = 'app.inventory.list'
'/在庫/靴/' = ' app.inventory.shoes '

私はui-sref-activeを動作させるために私のアプローチ（思考）を変えなければなりませんでした。

開始（デタラティブ）ルートを親にしてから、子との唯一の部分を入れ替えます。

あなたは 'Accueilの' 状態がアクティブに滞在していることがわかります

...

$stateProvider 
     .state('accueil', { 
     url: '/accueil', 
     views: { 
      'content@': { 
      templateUrl: './accueil.html' 
      } 
     } 
     }) 
     .state('accueil.debutant', { 
     url: '/debutant', 
     views: { 
      'content@': { 
      templateUrl: './debut.html' 
      } 
     } 
     }); 
    } 

また

https://plnkr.co/edit/8u3RhHRiPdhdF1lhWbeM?p=preview

は、...も活躍されて、子供のためのバージョンを追加しました

https://plnkr.co/edit/dXexFM38IUF3uaBGPovL?p=preview