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

2020/10/22 00:21 · javascript ·  · 0评论

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

现在,当满足特定条件时,我需要显示不同的弹出窗口,我想知道什么是最好的处理方式。

目前,我正在评估两个选项,但是我绝对可以接受其他选项。


选项1

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

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


选项2

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

此选项不是真正可扩展的。


因此,我很确定必须有一种更好的方法来实现我想要的目标。

根据到目前为止我对AngularJS模态的经验,我认为最优雅的方法是专用服务,我们可以向其提供部分(HTML)模板以模态显示。

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

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

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

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

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

整个视频也非常有趣:-)

  • 创建一个“ 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;
});

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

编辑:从那以后,我一直在使用http://likeastore.github.io/ngDialog中的ng-dialog,它很灵活,没有任何依赖关系。

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

本文地址:http://javascript.askforanswer.com/yizuiyouyadefangshixianshidanchuchuangkou.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!