Угловой ui-router ui-sref-active и вложенные состояния

Question

Я использую Angular 1.4.7, ui-router 0.2.15, и я хочу, чтобы вложенные маршруты/навигационные панели работали. В настоящее время я использую ui-sref-active, чтобы выделить соответствующий якорь в каждой панели навигации.

Вот визуализированный текст HTML: http://s29.postimg.org/6hygp05mf/routing_example.png. Я ожидаю, что он выделит ячейку в каждой навигационной панели (т. Е. Brainfood, Index). Верхний регистр проходит, нижний регистр терпит неудачу.

/Brainfood

• Expectation: Необходимо выделить элементы навигации: "Brainfood", "Index".
• Передает

/Brainfood/товары

• Ожидание: Необходимо выделить элементы навигации: "Brainfood", "Элементы".
• СБОЙ: Brainfood не подсвечивается

Штаты

Вот состояния, что я создаю (© = бетон, @ = аннотация).

ADD+ ©index/
ADD+ @brainfood /brainfood 
ADD+ ©brainfood.index/
ADD+ ©brainfood.items /items 
ADD+ ©brainfood.tags /tags 
ADD+ @songfu /songfu 
ADD+ ©songfu.index/

код - шаблон

<div> 
    <div class="comp-navbar" ng-class="type"> 
     <ul> 
      <li ng-repeat="link in links" ui-sref-active="selected"> 
       <a ui-sref="{{ link.state }}">{{ link.name }}</a> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 1

Верхняя нав работает, как ожидалось, когда я изменил свои Ui-sref значения от "brainfood.index" на "Brainfood". Теперь, когда я перехожу к «/ brainfood/tags», он работает по назначению. Однако это прерывается, когда я нажимаю на верхнюю навигацию, так как не могу перейти к абстрактному состоянию.

Есть два решения:

1. change your abstract states to concrete (не желательные)
2. add an abstract redirect hack

Почему создание основной вложенной иерархии вида с вложенными навигационными барами так трудно с Ui-маршрутизатором? Основной причиной этой проблемы является отсутствие разделения между идентифицированным государством и желаемым государством (ui-sref).

Возможное решение:

//Current directives: 
ui-sref="state to navigate to" 
ui-sref-active="class to toggle when state is active" 

//New directive: 
ui-sref-identity="define the state to use by ui-sref-active"