显示popup窗口最优雅的方式
我有这个AngularJS应用程序。 一切正常。
现在，当特定的条件变成真实时，我需要显示不同的popup窗口，我想知道什么是最好的进行方式。
目前我正在评估两个选项，但我完全开放其他选项。
选项1
我可以为popup窗口创build新的HTML元素，并直接从控制器追加到DOM。
这将打破MVCdevise模式。 我对这个解决scheme不满意。
选项2
我总是可以在静态HTML文件中插入所有popup窗口的代码。 然后，使用ngShow ，我可以隐藏/只显示正确的popup窗口。
这个选项不是真的可扩展的。
所以我很确定要有一个更好的方法来实现我想要的。
基于我迄今为止使用AngularJS模块的经验，我相信最优雅的方法是一个专门的服务，我们可以提供一个部分（HTML）模板以模态显示。
当我们考虑它时，模态是一种AngularJS的路线，只是在模态popup窗口中显示。
AngularUI引导项目（ http://angular-ui.github.com/bootstrap/ ）有一个很好的$modal服务（在0.6.0之前被称为$对话框），它是一个服务的实现来显示partial的内容作为模式popup。
这很有趣，因为我正在学习Angular，并在Youtube上观看他们频道上的一些video。 演讲者在28:30分钟左右的videohttps://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681中提到了确切的问题。
这归结为放置在一个服务，而不是一个控制器的特定的一段代码。
我的猜测是将新的popup式元素注入到DOM中，并单独处理它们，而不是显示和隐藏相同的元素。 这样你可以有多个popup窗口。
整个video也非常有趣，以及观看:-)
- 创build一个“popup”指令并将其应用于popup内容的容器
- 在指令中，将内容与其下面的mask div一起包装在绝对位置div中。
- 在指令中根据需要移动DOM树中的2个div是可以的。 指令中的任何UI代码都可以，包括将popup窗口定位在屏幕中心的代码。
- 创build一个布尔标志并将其绑定到控制器。 这个标志将控制能见度。
- 创build绑定到“确定”/“取消”function等的范围variables
编辑添加高级示例（非function）
<div id='popup1-content' popup='showPopup1'> .... .... </div> <div id='popup2-content' popup='showPopup2'> .... .... </div> .directive('popup', function() { var p = { link : function(scope, iElement, iAttrs){ //code to wrap the div (iElement) with a abs pos div (parentDiv) // code to add a mask layer div behind // if the parent is already there, then skip adding it again. //use jquery ui to make it dragable etc. scope.watch(showPopup, function(newVal, oldVal){ if(newVal === true){ $(parentDiv).show(); } else{ $(parentDiv).hide(); } }); } } return p; });
编辑：我以来一直在使用http://likeastore.github.io/ngDialog ng对话框，这是灵活的，没有任何依赖。
Angular-ui带有对话指令。使用它并将templateurl设置为你想包含的任何页面。这是最优雅的方式，我也在我的项目中使用了它。 您可以根据需要传递其他几个参数。
