Задать вопрос
styv
@styv
angular.js

AngularJS + ui-router открытие модального окна в виде отдельного роута

Добрый день.
Недавно с Angular, использую ui-router и bootstrap modal.

Появилась необходимость открывать модальное окно при переходе на отдельный роут.
Например, я нахожусь на /find и при клике на контакты должно открыться модальное окно и адрес измениться на /contacts. Модальное окно открывается по onEnter. Но проблема в том, что предыдущие вьюхи подгруженные в /find должны остаться (сейчас ui-router их убирает, т.к. с изменением адреса, меняется и состояние) и после закрытия модального окна адрес надо сменить обратно с /contacts на /find. Ну и /find это не единственный вариант (сейчас есть около 10 состояний).

Ничего дельного в голову не приходит, может у кого-то есть предложения?
  • Вопрос задан
  • 4239 просмотров
Комментировать
Подписаться 3 Средний Комментировать
Пригласить эксперта
Ответы на вопрос 3
@lorus
Смысл путей в том, что перейдя по определённому пути пользователь получит определённую страницу. Если же ваш `/find` в одном случае строится над `/contacts`, а в другом - над чем-то другим, то это не путь, а ерунда какая-то. А если пользователь обновит страницу браузера, что тогда?

Вам лучше комбинировать пути. Например, со страницы `/contacts` открывать страницу `/find/contacts`. Ну или `/contacts/find`, если так удобнее. Это будет та же страница, что и `/contacts`, но с открытым модальным окном.
Ответ написан
2 комментария
2 комментария
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
без какого-то базового раута вы не можете задать новый, сохраняя текущий. То есть маршрут contacts должен зависеть от какого-то другого.
Ответ написан
Комментировать
Комментировать
@sergeysmishin
Используйте Multiple Named Views https://github.com/angular-ui/ui-router/wiki/Multi...

В Вашем случае будет примерно так:

<body>
    
    <div data-ui-view="content"></div>

    <div data-ui-view="contacts"></div>

</body>


$stateProvider
            .state('find', {
                url: "/find",
                views: {
                    'content': {
                        templateUrl: "/content.html",
                        controller: 'registerController'
                    }
                }
            })
            .state('contacts ', {
                url: "/contacts ",
                views: {
                    'content': {
                        templateUrl: "/content.html",
                        controller: 'contentController'
                    },
                    'contacts': {
                        templateUrl: "/contacts.html",
                        controller: 'contactsController'
                    }
                }
            });
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Системный аналитик
Гринатом
от 200 000 до 300 000 ₽
Архитектор информационной безопасности
Wanted. • Москва
До 550 000 ₽
FullStack разработчик middle+ (Node Js - React Js)
InCodeWeTrust • Алматы
от 1 000 000 ₸
Ещё вакансии
Заказы с Хабр Фриланса
Правки по сайту WordPress + WooCommerce
27 дек. 2024, в 09:38
6000 руб./за проект
2D-анимация в формате SVG для размещения на сайт
27 дек. 2024, в 09:01
2000 руб./за проект
Сверстать сайт по шаблону из Figma
27 дек. 2024, в 08:49
12000 руб./за проект
Ещё заказы