javascript - 弹出窗口最优雅的方式(Show pop-ups the most elegant way)

Question

I have this AngularJS app.

(我有这个AngularJS应用程序。)

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(选项1)

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

(我可以为弹出窗口创建新的HTML元素，并直接从控制器附加到DOM。)

This will break the MVC design pattern.

(这将打破MVC设计模式。)

I'm not happy with this solution.

(我对这个解决方案不满意。)

---

Option 2(选项2)

I could always insert the code for all the pop-ups in the static HTML file.

(我总是可以在静态HTML文件中插入所有弹出窗口的代码。)

Then, using ngShow , I can hide / show only the correct pop-up.

(然后，使用ngShow ，我可以隐藏/只显示正确的弹出窗口。)

This option is not really scalable.

(此选项不是真正可伸缩的。)

---

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

(所以我很确定必须有更好的方法来实现我想要的。)

  ask by Bruno translate from so

Answer 1

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.

(根据我迄今为止对AngularJS模态的经验，我认为最优雅的方法是一个专用服务，我们可以提供一个部分（HTML）模板以模态显示。)

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

(当我们考虑它时，模态是一种AngularJS路线，但只是在模态弹出窗口中显示。)

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.

(AngularUI引导程序项目（ http://angular-ui.github.com/bootstrap/ ）具有出色的$modal服务（以前称为版本0.6.0之前的$ dialog），它是一个显示部分服务的服务实现内容作为模态弹出窗口。)