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

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

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

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

Ничего дельного в голову не приходит, может у кого-то есть предложения?
  • Вопрос задан
  • 4227 просмотров
Комментировать
Подписаться 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 комментарий
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Angular frontend developer middle+
IT Force • Краснодар
от 200 000 ₽
Системный администратор/IT-специалист
Оптималог • Москва
До 100 000 ₽
Бэкэнд разработчик сайтов
Валверде
от 40 000 до 60 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Настроить ИИ модель IPadapter
26 апр. 2024, в 11:17
2000 руб./за проект
Кастомизация модуля sale интернет-магазина на 1С Битрикс
26 апр. 2024, в 11:07
1000 руб./в час
Настройка шаблона (или темы) WP/
26 апр. 2024, в 11:02
2000 руб./за проект
Ещё заказы