angularjs ui.router activestate with dropdown

Question

我想創建我的菜單，其中有一個下拉菜單，用於應用程序中的多個鏈接。

我希望它是「活躍」，而下面的鏈接之一是積極的。

我在我的下拉列表中的鏈接是活躍和我得到下拉被激活，但我從來沒有得到他們兩人一起工作...只有一個工作......

這裏是代碼，如果有人能指出我在哪裏做錯了什麼！

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

編輯

這裏是一個顯示問題 https://plnkr.co/edit/Ffe9FLz4TuihkVjby6RU

ANSWER

app.js一個plunkr

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

<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解決方案的控制檯錯誤。

切換到

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

我的視圖因此該解決方案是這一部分：

UI-SREF活性= 「{ '活性'： '登場**'}」

。**匹配父母的任何孩子！

Answer 2

UI-S REF-主動將保持對所有子路由活躍......問題是你實現UI的路由器。

當我從邏輯上思考關於路線鏈接時，它就是這樣的。

'/'= 'app.inventory' //摘要：真正的 - 可能共享解決或數據
'/存貨/'= 'app.inventory.list'
'/存貨/鞋/'=' app.inventory.shoes'

我不得不改變我的方法（和思考），以使用戶界面有效的工作。

開始（初次登臺）路線的父母，然後換出一個孩子的唯一部分。

你會發現， '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