弹出窗口最优雅的方式

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代码都可以,包括将弹出窗口定位在屏幕中心的代码.
• 创建一个布尔标志并将其绑定到控制器.此标志将控制可见性.
• 创建绑定到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

请参阅 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设置为你想要包含的任何页面.这是最优雅的方式,我也在我的项目中使用它.您可以根据需要为对话框传递其他几个参数.