Задать вопрос
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 комментарий
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Frontend разработчик (Java-Script)
Товеко
от 65 000 до 100 000 ₽
Senior Data Scientist (Ценообразование)
Магнит
До 420 000 ₽
Frontend разработчик (Angular)
Гринатом • Москва
от 120 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Перенести сайт с правками на другую платформу
26 нояб. 2024, в 10:57
40000 руб./за проект
Распознать подделку PDF файла от оригинального чека PDF
26 нояб. 2024, в 10:25
300000 руб./за проект
Нужно найти список всех 2-5 этажек рф
26 нояб. 2024, в 10:24
500 руб./за проект
Ещё заказы