angular点击按钮弹出页面,AngularJS，显示弹出窗口 - 最优雅的方式？

This time I've a question more conceptual than else...

so there isn't much real code here.

I've this AngularJS app. Everything works just fine.

Now I need to show different popups when specific conditions become true, and I was wondering what is the best way to proceed.

Currently I'm evaluating two options, but I'm absolutely open to other options (if are better).

(Option 1)

I could create the new html element for the popup, 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 insert always the code for all the popups in the static html

file.

Then, using ngShow, I can hide/show only the correct popup.

This option is not really scalable.

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

As always, any help is welcomed.

Thank you in advance

解决方案

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.