Показывать всплывающие окна самым элегантным способом

178

У меня есть это приложение AngularJS. Все работает просто отлично.

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

В настоящее время я оцениваю два варианта, но я абсолютно открыт для других вариантов.


Опция 1

Я мог бы создать новый элемент HTML для всплывающего окна и добавить к DOM непосредственно из контроллера.

Это сломает шаблон проектирования MVC. Я не доволен этим решением.


Вариант 2

Я всегда мог вставить код для всех всплывающих окон в статическом HTML-файле. Затем, используя ngShow, я могу скрыть / показать только правильное всплывающее окно.

Эта опция не очень масштабируема.


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

Bruno
источник
многочисленные способы, контроллер для HTML defintiely не хороший способ, взгляд на UI Bootstrap Модальные angular-ui.github.com/bootstrap/#/modal
charlietfl
1
Документы AngularJS объясняют, как управлять всплывающими окнами, в разделе « Общие сведения о включении и областях применения ». Надеюсь это поможет.
Иван Феррер Вилла
Если вы действительно хотите масштабировать с помощью всплывающих окон, посмотрите попскрипт .
Радж Натани

Ответы:

88

Исходя из моего опыта работы с модальностями AngularJS, я считаю, что наиболее элегантный подход - это выделенный сервис, для которого мы можем предоставить частичный (HTML) шаблон для отображения в модале.

Когда мы думаем об этом, модалы являются своего рода маршрутами AngularJS, но просто отображаются в модальном всплывающем окне.

Проект начальной загрузки AngularUI ( http://angular-ui.github.com/bootstrap/ ) имеет отличный $modalсервис (раньше его называли $ dialog до версии 0.6.0), который представляет собой реализацию сервиса для отображения содержимого части в виде модальное всплывающее окно.

pkozlowski.opensource
источник
10
$ диалог теперь $ модальный
Санграм Сингх
1
@ pkozlowski.opensource Мне нравится подход ui-bootstrap, однако я не могу заключить контент с модальным. Я исследовал это некоторые и вижу, что у других людей есть эта проблема также.
Юзопи
2
weblogs.asp.net/dwahlin/building-an-angularjs-modal-service Я нашел этот материал очень полезным.
JenonD
Просто упомянуть, что сервис не должен иметь доступ к DOM. Директива это место для этого.
Сверхсветовой
1
@superluminary - это действительно хорошее общее правило, которому нужно следовать, но также важно знать, почему определенное правило находится в темпе, и понимать, когда такое правило может (или даже должно!) нарушаться. Я считаю, что модалы / всплывающие подсказки и тому подобное являются исключением из правила. Короче говоря: нужно знать правила, а также понимать контекст, в котором они применяются / не применяются.
pkozlowski.opensource
29

Забавно, потому что я сам изучаю Angular и смотрел видео с их канала на Youtube. Докладчик упоминает о вашей проблеме в этом видео https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681 около отметки 28:30.

Все сводится к размещению именно этого куска кода в службе, а не в контроллере.

Я полагаю, что нужно вводить новые всплывающие элементы в DOM и обрабатывать их отдельно, а не показывать и скрывать один и тот же элемент. Таким образом, вы можете иметь несколько всплывающих окон.

Весь ролик тоже очень интересно смотреть :-)

Барт
источник
2
Миско - это угловое семя! (бва хаха) Серьезно Относитесь его слово как на основном источнике для углового.
колода
14
  • Создайте директиву popup и примените ее к контейнеру всплывающего контента.
  • В директиве оберните содержимое в div абсолютной позиции вместе с маской div ниже нее.
  • Можно перемещать 2 деления в дереве DOM по мере необходимости из директивы. Любой код пользовательского интерфейса в директивах в порядке, включая код для размещения всплывающего окна в центре экрана.
  • Создать и привязать логический флаг к контроллеру. Этот флаг будет контролировать видимость.
  • Создайте переменные области видимости, которые связаны с функциями OK / Cancel и т. Д.

Редактирование, чтобы добавить пример высокого уровня (не работает)

<div id='popup1-content' popup='showPopup1'>
  ....
  ....
</div>


<div id='popup2-content' popup='showPopup2'>
  ....
  ....
</div>



.directive('popup', function() {
  var p = {
      link : function(scope, iElement, iAttrs){
           //code to wrap the div (iElement) with a abs pos div (parentDiv)
          // code to add a mask layer div behind 
          // if the parent is already there, then skip adding it again.
         //use jquery ui to make it dragable etc.
          scope.watch(showPopup, function(newVal, oldVal){
               if(newVal === true){
                   $(parentDiv).show();
                 } 
              else{
                 $(parentDiv).hide();
                }
          });
      }


   }
  return p;
});
Ketan
источник
$ смотреть вместо «смотреть». также не должно быть «всплывающее окно» вместо «showPopup» в scope.watch(showPopup, function(newVal, oldVal){?
Санграм Сингх
14

Смотрите http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/ для простого способа создания модального диалога с Angular без необходимости начальной загрузки

Редактировать: с тех пор я использую ng-диалог с http://likeastore.github.io/ngDialog, который является гибким и не имеет никаких зависимостей.

Ник Доу
источник
1
Я только что сделал быстрый спринт с этим подходом, только чтобы понять, что это отлично подходит для одного всплывающего / модального подхода, однако подумайте об этом конкретном UX: скажем, клиент заказывает товар, а пользовательский интерфейс представляет всплывающее окно подтверждения заказа (поэтому мы "заняли" всплывающее окно Адама с контентом). Теперь мы нажимаем «отправить» или «купить» или что-то еще из этого всплывающего окна, и возникает ошибка, из-за которой пользователю необходимо изменить этот порядок на предыдущем экране. Я хочу отобразить эту ошибку в другом всплывающем окне на верхнем уровне. Такой подход не способствует этому, я не верю.
Юзопи
3
Правда, но я думаю, что несколько всплывающих окон могут быть плохим интерфейсом.
Ник Доу
Ну, плагин - это ответ, который я искал!
Андрес Фелипе
7

Angular-ui поставляется с диалоговой директивой. Используйте ее и установите templateurl для любой страницы, которую вы хотите включить. Это самый элегантный способ, и я также использовал его в своем проекте. Вы можете передать несколько других параметров для диалога в соответствии с необходимостью.

user2203937
источник
5
angular-bootstrap 0.6 и выше заменил $ dialog на $ modal. Это означает, что вам нужно изменить весь код, использующий $ dialog, поскольку он устарел, и написать его в $ modal
Мохаммад Умайр Хан