UI-маршрутизатор для дочерних состояний без вложенности

Question

Можете ли вы использовать Angular ui-router для описания иерархии страниц, где страницы не вложены?

фона:

Я разрабатываю небольшой веб-приложение с ~ 10 отдельных страниц, которые образуют четкую иерархию (т.е. Dashboard -> Student X -> Упражнение Y -> Покушение Z). Я хотел бы иметь возможность выразить эту иерархию в коде, поэтому я мог бы получить легкие хлебники и кнопку возврата, которая сохраняет состояние страницы (в отличие от перезагрузки). Проект уже использует UI-маршрутизатор для некоторых под-представлений, поэтому было логично также построить эту иерархию поверх этого.

Однако проблема, с которой я столкнулся, заключается в следующем: ui-router загружает дочернее состояние в ui-view INSIDE родительское состояние, тогда как я хотел бы загрузить его в тот же самый тег ui-view, , INSTEAD родителя.

Моего идеальное решение предусматривало бы мне просто быть в состоянии написать дополнительный параметр replace-parent в описание состояния, такие как

.state('student.profile', { 
    url: '/profile', 
    templateUrl: 'views/profile.html', 
    controller: 'ProfileCtrl', 
    replace-parent: true 
    }) 

, который затем заменить UI-мнение, что состояние «студент» было загружено в с страницу профиля, когда это состояние загружено (и обратно, когда дочернее состояние выгружено).

Может ли кто-нибудь придумать способ достичь примерно этого результата разумными способами? Лучшее, что я могу думать о себе, - это слушать события $ stateChange, а затем жертвовать несколькими козами JQuery allmighty, но я действительно надеюсь, что есть довольно, угловатый способ сделать это.

Answer 1

Я просто столкнулся с аналогичной проблемой, где хочу выразить иерархию отслеживания прогресса. Кажется, что UI Router не поддерживает вложенные состояния, не вставляя представления.

Я склонен решить так:

.state('student', { 
    url: '/student', 
    templateUrl: 'views/student.html', 
    controller: 'StudentCtrl' 
})  
.state('studentProfile', { 
    url: '/student/profile', 
    templateUrl: 'views/profile.html', 
    controller: 'ProfileCtrl' 
}) 

Обратите внимание, что государства остаются плоскими, но URL имеет иерархию. Таким образом, не требуется просмотр-вложенность, но для этого требуется добавить дополнительную работу в директиву/код.

Я все еще ищу лучшее решение.