显示弹出式窗口的最优雅的方式显示弹出式窗口的最优雅的方式(Show pop-ups the most

我有这个AngularJS应用。一切工作就好了。

现在我需要显示不同的弹出窗口，当特定条件为真，我想知道什么是最佳前进方式。

目前我正在评估两个选择，但我对其他的选择绝对开放。

选项1

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

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

选项2

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

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

所以我敢肯定，必须有一个更好的方法来达到我想要的。

Answer 1:

根据我AngularJS情态动词的经验，到目前为止我认为，最简洁的方法是一个专门服务于我们可以提供显示在一个模式的部分（HTML）模板。

当我们仔细想想情态动词是一种AngularJS路线只是显示模式弹出。

该AngularUI引导项目（ http://angular-ui.github.com/bootstrap/ ）具有优良$modal的服务（以前被称为$对话之前0.6.0版本），这是一个服务的实现，显示部分的内容作为模式弹出。

Answer 2:

因为我学角度自己，在看一些视频的自己的YouTube频道，这很有趣。演讲者提到了这个视频你确切的问题https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681绕28:30分钟大关。

它归结为放置的代码，特定块在一个服务而不是控制器。

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

整个视频是非常有趣的，以及观看:-)

Answer 3:

创建一个“弹出”指令，并将其应用到弹出内容的容器
在该指令，包裹在一个绝对位置DIV的内容与下方的面具格一起。
它是确定从指令中需要移动2个div的DOM树。任何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;
});