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

我有这个AngularJS应用。一切正常。

现在，当满足特定条件时，我需要显示不同的弹出窗口，我想知道什么是最好的处理方式。

目前，我正在评估两个选项，但是我绝对会接受其他选项。

选项1

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

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

选项2

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

此选项不是真正可扩展的。

因此，我很确定必须有一种更好的方法来实现我想要的目标。

根据到目前为止我对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并单独处理它们，而不是显示和隐藏相同的元素。这样，您可以拥有多个弹出窗口。

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

• 创建一个“ 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;
});

请参阅 http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/， 了解使用Angular进行模态对话框且无需引导的简单方法

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

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