Angular -ui Router получает два состояния, активные параллельно

Мне нужно использовать два состояния параллельно, одно для моей страницы и другое для модального с несколькими подчиненными состояниями. Прямо сейчас вызов модального состояния уничтожит мою страницу, так как изменилось состояние страницы.

Создание дочернего состояния дочернего элемента моей страницы не будет решением, так как модальный будет использоваться на нескольких страницах.

Пример:

$stateProvider
.state('user', {}) // page
.state('bookshelf', {}) // page
.state('books', {}) // modal
.state('books.read', {}) // sub state of modal

Итак, если я нахожусь на user и откройте мой модальный, тогда состояние изменится на books, тогда мой модальный будет содержать контент, но содержимое страницы будет уничтожено.

Как это исправить?

Ответ 1

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

Способ думать об этом - это то, что UI.Router работает, создавая дерево состояний. В любой момент времени вы можете смотреть только на одну ветку дерева. Вы можете пойти глубже по ветке (например: book, book.open, book.open.checked), но вы не можете быть в двух местах одновременно.

Другая проблема с вышеприведенной проблемой заключается в том, как вы сериализуете состояние двух разных деревьев в один URL-адрес? Это не значит, что это невозможно сделать, это просто трудная проблема.

Проверьте эти проблемы:

Также проверяйте эти репозитории, они могут быть продолжены по пути решения проблемы.

Что касается решения вашей непосредственной проблемы, я думаю, что "самым простым" способом было бы остановить контроль над состоянием модальности внутри вашего конфигурационного файла.

Вместо этого я бы добавил какое-то корневое или абстрактное состояние, а затем отслеживал, открыт ли модад там. Затем вы можете общаться между контроллерами, используя события показанные здесь. Примечание. последствия производительности при прослушивании $rootScope, поэтому обязательно исследуйте их. Однако (кто-то может меня исправить), реализация здесь не имеет этих проблем, потому что AppCtrl никогда не уничтожается.

15 января 2015 г. Редактировать

Оказывается, это довольно популярный прецедент, и один из основных участников UI Router поддерживает плагин/дополнение, называемый Дополнительные возможности интерфейса UI

В него также включены утилиты для ленивой загрузки, называемые "Будущие государства", которые очень полезны.

Как говорится, одна из возможностей, на которую я надеюсь получить время, - это поддерживать все состояние в URL-адресе (или, возможно, локальном хранилище) и разрешать "компоненты" многоразового использования. Последнее также относится к дорожной карте UI-маршрутизатора.