弹出窗口最优雅的方式

Question

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

现在我需要在特定条件成立时显示不同的弹出窗口，我想知道最佳方法是什么。

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

---

选项1

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

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

---

选项2

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

此选项无法真正扩展。

---

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

Answer 1

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

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

AngularUI引导程序项目（http://angular-ui.github.com/bootstrap/）具有出色的$modal服务（以前称为版本0.6.0之前的$ dialog），它是一项服务的实现，用于将部分内容显示为模态弹出窗口。

Answer 2

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

归结为将该特定代码放在服务中而不是控制器中。

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

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

Answer 3

• 创建一个'popup'指令并将其应用于弹出内容的容器
• 在指令中，将内容包装在绝对位置div以及它下面的掩码div中。
• 可以根据需要在指令中移动DOM树中的2个div。指令中的任何UI代码都可以，包括将弹出窗口置于屏幕中心的代码。
• 创建一个布尔标志并将其绑定到控制器。此标志将控制可见性。
• 创建绑定到“确定/取消”功能等的范围变量。

编辑以添加高级示例（非功能性）

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

Answer 4

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

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

Answer 5

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