Показать всплывающие окна самый элегантный способ
У меня есть это приложение AngularJS. Все работает просто отлично.
теперь мне нужно показать различные всплывающие окна, когда конкретные условия становятся истинными, и мне было интересно, что было бы лучшим способом продолжить.
в настоящее время я оцениваю два варианта, но я абсолютно открыт для других вариантов.
1
Я мог бы создать новый HTML-элемент для всплывающего окна и добавить к DOM непосредственно из контроллера.
Это разорвать шаблон проектирования MVC. Я не доволен этим решением.
2
Я всегда мог вставить код для всех всплывающих окон в статический HTML-файл. Затем, используя ngShow
, Я могу Скрыть / показать только правильное всплывающее окно.
эта опция на самом деле не масштабируется.
Так что я уверен, что должен быть лучший способ достичь того, что я хочу.
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 который является гибким и не имеет никаких зависимостей.