Show pop-ups the most elegant way

Bruno picture Bruno · Apr 4, 2013 · Viewed 234.3k times · Source

I have this AngularJS app. Everything works just fine.

Now I need to show different pop-ups when specific conditions become true, and I was wondering what would be the best way to proceed.

Currently I’m evaluating two options, but I’m absolutely open to other options.


Option 1

I could create the new HTML element for the pop-up, and append to the DOM directly from the controller.

This will break the MVC design pattern. I’m not happy with this solution.


Option 2

I could always insert the code for all the pop-ups in the static HTML file. Then, using ngShow, I can hide / show only the correct pop-up.

This option is not really scalable.


So I’m pretty sure there has to be a better way to achieve what I want.

Answer

pkozlowski.opensource picture pkozlowski.opensource · Apr 4, 2013

Based on my experience with AngularJS modals so far I believe that the most elegant approach is a dedicated service to which we can provide a partial (HTML) template to be displayed in a modal.

When we think about it modals are kind of AngularJS routes but just displayed in modal popup.

The AngularUI bootstrap project (http://angular-ui.github.com/bootstrap/) has an excellent $modal service (used to be called $dialog prior to version 0.6.0) that is an implementation of a service to display partial's content as a modal popup.