我有一个AngularJS应用程序。所有东西都运作正常。
现在，当特定条件成立时，我需要显示不同的弹出窗口，我正在考虑采取什么最好的方法。
目前我正在评估两个选项，但我绝对愿意接受其他选项。
我可以为弹出窗口创建新的HTML元素，并直接从控制器附加到DOM中。
这将破坏MVC设计模式。我对这个解决方案不满意。
我可以始终在静态HTML文件中插入所有弹出窗口的代码。然后，使用ngShow，我可以隐藏/显示只正确的弹出窗口。
这个选项不真正具有可扩展性。
因此，我非常确定必须有更好的方法来实现我的要求。
根据我对AngularJS模态框的经验，我认为最优雅的方法是创建一个专门的服务，我们可以向该服务提供一个部分（HTML）模板以在模态框中显示。
当我们考虑它时，模态框有点像AngularJS路由，但只是以模态弹出窗口的形式显示。
AngularUI bootstrap项目 (http://angular-ui.github.com/bootstrap/)有一个出色的$modal服务（在版本0.6.0之前称为$dialog），用于实现将部分内容显示为模态弹出窗口的服务。
很有趣，因为我自己也在学习Angular，并且正在观看他们在Youtube上的一些视频。在这个视频中，演讲者在28:30分左右提到了你的确切问题。https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681
关键是将那段特定的代码放在服务中而不是控制器中。
我的猜测是将新的弹出窗口元素注入到DOM中并单独处理它们，而不是显示和隐藏相同的元素。这样，您可以拥有多个弹出窗口。
整个视频也非常有趣 :-)
编辑添加一个高级别示例（非功能性）
<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;
});
scope.watch(showPopup, function(newVal, oldVal){中，'showPopup'应该改为'popup'。 - Sangram Singh请查看http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/，这是使用Angular实现简单的模态对话框且无需使用bootstrap的简便方法。
编辑：我后来使用了来自http://likeastore.github.io/ngDialog的ng-dialog，它非常灵活且不需要任何依赖。
Angular-UI带有对话框指令。使用该指令并将templateurl设置为您想要包含的页面即可。这是最优雅的方法，我也在我的项目中使用了它。您可以根据需要传递其他几个对话框参数。