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


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

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

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


1

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

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


2

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

эта опция на самом деле не масштабируется.


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

5 176

5 ответов:

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

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

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

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

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

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

все видео очень интересно смотреть, как хорошо :-)

  • создайте директиву' popup ' и примените ее к контейнеру содержимого popup
  • в директиве оберните содержимое в абсолютное положение div вместе с маской div под ним.
  • это нормально, чтобы переместить 2 divs в дереве 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/ для простого способа сделать модальный диалог с угловым и без необходимости bootstrap

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

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