У меня есть это приложение AngularJS. Все работает просто отлично.
Теперь мне нужно показывать разные всплывающие окна, когда конкретные условия становятся реальностью, и мне было интересно, что будет лучшим способом для продолжения.
В настоящее время я оцениваю два варианта, но я абсолютно открыт для других вариантов.
Опция 1
Я мог бы создать новый элемент HTML для всплывающего окна и добавить к DOM непосредственно из контроллера.
Это сломает шаблон проектирования MVC. Я не доволен этим решением.
Вариант 2
Я всегда мог вставить код для всех всплывающих окон в статическом HTML-файле. Затем, используя ngShow
, я могу скрыть / показать только правильное всплывающее окно.
Эта опция не очень масштабируема.
Так что я уверен, что должен быть лучший способ достичь того, чего я хочу.
Ответы:
Исходя из моего опыта работы с модальностями AngularJS, я считаю, что наиболее элегантный подход - это выделенный сервис, для которого мы можем предоставить частичный (HTML) шаблон для отображения в модале.
Когда мы думаем об этом, модалы являются своего рода маршрутами AngularJS, но просто отображаются в модальном всплывающем окне.
Проект начальной загрузки AngularUI ( http://angular-ui.github.com/bootstrap/ ) имеет отличный
$modal
сервис (раньше его называли $ dialog до версии 0.6.0), который представляет собой реализацию сервиса для отображения содержимого части в виде модальное всплывающее окно.источник
Забавно, потому что я сам изучаю Angular и смотрел видео с их канала на Youtube. Докладчик упоминает о вашей проблеме в этом видео https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681 около отметки 28:30.
Все сводится к размещению именно этого куска кода в службе, а не в контроллере.
Я полагаю, что нужно вводить новые всплывающие элементы в DOM и обрабатывать их отдельно, а не показывать и скрывать один и тот же элемент. Таким образом, вы можете иметь несколько всплывающих окон.
Весь ролик тоже очень интересно смотреть :-)
источник
Редактирование, чтобы добавить пример высокого уровня (не работает)
источник
scope.watch(showPopup, function(newVal, oldVal){
?Смотрите http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/ для простого способа создания модального диалога с Angular без необходимости начальной загрузки
Редактировать: с тех пор я использую ng-диалог с http://likeastore.github.io/ngDialog, который является гибким и не имеет никаких зависимостей.
источник
Angular-ui поставляется с диалоговой директивой. Используйте ее и установите templateurl для любой страницы, которую вы хотите включить. Это самый элегантный способ, и я также использовал его в своем проекте. Вы можете передать несколько других параметров для диалога в соответствии с необходимостью.
источник