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

У меня есть это приложение 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 и обрабатывать их отдельно, а не показывать и скрывать один и тот же элемент. Таким образом, вы можете иметь несколько всплывающих окон.

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

• Создайте директиву 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;
});

Смотрите 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 для любой страницы, которую вы хотите включить. Это самый элегантный способ, и я также использовал его в своем проекте. Вы можете передать несколько других параметров для диалога в соответствии с необходимостью.