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

小开

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

归结起来就是将特定的代码片段放在服务中，而不是放在控制器中。

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

整个视频看起来也很有趣: -)

小开

最佳答案

基于我迄今为止使用 AngularJS 模式的经验，我认为最优雅的方法是专门的服务，我们可以提供一个部分(HTML)模板，以便在模式中显示。

当我们认为它模态是一种 AngularJS 路线，但只是显示在模态弹出窗口。

AngularUI 引导项目(http://angular-ui.github.com/bootstrap/)有一个优秀的 $modal服务(在版本0.6.0之前通常被称为 $Dialogue) ，这是一个将部分内容显示为模态弹出窗口的服务的实现。

小开

创建一个“ popup”指令并将其应用到弹出内容的容器中
在该指令中，将内容包装在绝对位置 div 中，并在其下方包装掩码 div。
可以根据需要从指令中移动 DOM 树中的2个 div。指令中的任何 UI 代码都是可以的，包括将弹出窗口定位在屏幕中央的代码。
创建并绑定一个布尔标志到控制器。这个标志将控制可见性。
创建绑定到 OK/Cancel 函数等的范围变量。

编辑以添加高级示例(非功能性)

<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;
});

小开

Angular-ui 附带了对话框指令。使用它并将 templateurl 设置为您希望包含的任何页面。这是最优雅的方式，我已经用它在我的项目以及。您可以根据需要为对话框传递几个其他参数。

小开

Http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/ 一个简单的方式做模态对话与角度，而不需要自举

编辑: 我一直在使用来自 http://likeastore.github.io/ngDialog的 n- 对话框，它是灵活的，没有任何依赖性。

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

选择一

选择二