以最优雅的方式显示弹窗

Question

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

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

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

---

选项 1

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

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

---

选项 2

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

这个选项不是真正可扩展的。

---

所以我很确定必须有更好的方法来实现我想要的。

Answer 1

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

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

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

整个视频也很有趣:-)

Answer 2

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

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

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

Answer 3

• 创建一个“弹出”指令并将其应用于弹出内容的容器
• 在指令中，将内容包装在绝对位置 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;
});

Answer 4

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

Answer 5

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

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