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

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

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

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

Вариант 1

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

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

Вариант 2

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

Этот параметр не является масштабируемым.

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

Ответ 1

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

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

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

Ответ 2

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

Это сводится к тому, что этот конкретный фрагмент кода используется в службе, а не в контроллере.

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

Весь видео очень интересно посмотреть: -)

Ответ 3

Создайте директиву "popup" и примените ее к контейнеру всплывающего содержимого.
В директиве оберните содержимое в абсолютную позицию div вместе с маской div ниже нее.
Все в порядке, чтобы переместить 2 divs в дереве DOM по мере необходимости из директивы. Любой код пользовательского интерфейса в директивах в порядке, включая код для размещения всплывающего окна в центре экрана.
Создайте и привяжите логический флаг к контроллеру. Этот флаг будет контролировать видимость.
Создайте переменные области видимости, связывающие функции OK/Отмена и т.д.

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

<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;
});

Ответ 4

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

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

Ответ 5

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