以最优雅的方式显示弹窗

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

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

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

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

归根结底是将特定的代码放在服务而不是控制器中。

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

整个视频也很有趣:-)

创建一个“弹出”指令并将其应用于弹出内容的容器

在指令中，将内容包装在绝对位置的 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 进行模态对话框且无需引导程序的简单方法，请参见 http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/

编辑：从那以后，我一直在使用来自 http://likeastore.github.io/ngDialog 的 ng-dialog，它很灵活并且没有任何依赖关系。

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