Покажіть спливаючі вікна найелегантнішим способом

У мене є ця програма 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 та обробити їх окремо, а не показувати та приховувати той самий елемент. Таким чином ви можете мати кілька спливаючих вікон.

Ціле відео дуже цікаво також дивитись :-)

• Створіть директиву "спливаюче вікно" та застосуйте її до контейнера вмісту
• У директиві загортайте вміст у абсолютне місце div разом із маскою div під ним.
• Добре переміщувати 2 діви в дереві DOM за потребою зсередини директиви. Будь-який код користувальницького інтерфейсу відповідає нормам, включаючи код для розміщення спливаючого вікна в центрі екрана.
• Створіть і прив’яжіть булевий прапор до контролера. Цей прапор буде контролювати видимість.
• Створіть змінні області, які прив'язуються до функцій ОК / Скасувати тощо.

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

<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/ для простого способу ведення модального діалогу з кутовим і без необхідності завантажувальної програми

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

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