angularjs ui-router текущее состояние активно

Question

Я создаю меню в контроллере.

$scope.menu = [ 
    { 
     "title": "Home", 
     "state": "app.home", 
     "active": $state.is("app.home") 
    }, 
    { 
     "title": "Product", 
     "state": "app.product", 
     "active": $state.is("app.product") 
    }, 
    { 
     "title": "Category", 
     "state": "app.category", 
     "active": $state.is("app.category") 
    } 
] 

Я установил свойство для указания активного состояния. Если мое состояние текущее, активным свойством будет true.

 <ul class="nav nav-pills nav-stacked"> 
      <li ng-repeat="item in menu" ng-class="{active:item.active}"> 
       <a ui-sref="{{item.state}}"> {{item.title}}</a> 
      </li> 
     </ul> 

Но когда я изменяю состояние, активная собственность не стреляет.

Answer 1

Ваша коррекция предложенное решение:

<ul class="nav nav-pills nav-stacked"> 
      <li ng-repeat="item in menu" ng-class="{active: $state.is('stateName')}"> 
       <a ui-sref="{{item.state}}"> {{item.title}}</a> 
      </li> 
</ul> 

Или вы можете просто использовать ui-sref-active:

Пример

Учитывая следующий шаблон:

<ul> 
    <li ui-sref-active="active" class="item"> 
    <a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a> 
    </li> 
</ul> 

Когда состояние приложения «app.user» (или любые дочерние состояния) и содержит параметр состояния «пользователь» со значением «bilbobaggins», итоговый HTML будет отображаться как (обратите внимание на класс «active»):

<ul> 
    <li ui-sref-active="active" class="item active"> 
    <a ui-sref="app.user({user: 'bilbobaggins'})" href="https://stackoverflow.com/users/bilbobaggins">@bilbobaggins</a> 
    </li> 
</ul> 

имя класса интерполировано один раз в течение времени директив ссылки (любые последующие изменения в интерполированном значение игнорируется).

Несколько классов могут быть определены в пространстве разделенного формата:

<ul> 
    <li ui-sref-active='class1 class2 class3'> 
    <a ui-sref="app.user">link</a> 
    </li> 
</ul>