Show pop-ups the most elegant way
angularjs, javascript, model-view-controller, popup, show-hide
Solution
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.
Problem
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.