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

Question

我有这个角度JS应用程序。一切都很好。

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

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

我可以为弹出窗口创建新的超文本标记语言元素，并直接从控制器附加到DOM。

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

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

此选项实际上并不具有可伸缩性。

所以我非常肯定，必须有更好的方法来实现我想要的。

Answer 1

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

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

<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 2

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

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

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

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

Answer 3

根据我迄今为止使用AngularJS模态的经验，我认为最优雅的方法是一种专用服务，我们可以为其提供部分（超文本标记语言）模板以模态显示。

当我们考虑它的时候，模态是一种有角度的路线，但是只是显示在模态弹出菜单中。

AngularUI bootstrap项目（http://angular-ui.github.com/bootstrap/）有一个优秀的$modal服务（在0.6.0版之前称为$dialog），它是将部分内容显示为模态弹出窗口的服务的实现。