以最优雅的方式显示弹出窗口

我有这个AngularJS应用程序。一切都很好。

现在,当特定条件变为真时,我需要显示不同的弹出窗口,我想知道什么是最好的方法。

目前,我正在评估两个选项,但我对其他选项持绝对开放态度。


备选案文1

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

这将打破 MVC 设计模式。我对这个解决方案不满意。


备选案文2

我总是可以在静态HTML文件中插入所有弹出窗口的代码。然后,使用,我可以隐藏/仅显示正确的弹出窗口。ngShow

此选项实际上不可扩展。


所以我非常确定必须有更好的方法来实现我想要的东西。


答案 1

根据我到目前为止使用AngularJS模态的经验,我认为最优雅的方法是专用服务,我们可以提供部分(HTML)模板以模态显示。

当我们想到它时,模态是一种AngularJS路由,但只是显示在模态弹出窗口中。

AngularUI bootstrap 项目(http://angular-ui.github.com/bootstrap/)具有出色的服务(在 0.6.0 版之前以前称为 $dialog),它是将部分内容显示为模式弹出窗口的服务实现。$modal


答案 2

这很有趣,因为我自己正在学习Angular,并且正在Youtube上观看他们频道的一些视频。演讲者在本视频中提到了您的确切问题,https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681 28:30分钟左右。

它归结为将该特定代码段放在服务中,而不是控制器中。

我的猜测是将新的弹出元素注入DOM并单独处理它们,而不是显示和隐藏相同的元素。这样,您可以拥有多个弹出窗口。

整个视频也非常有趣:-)