最优雅的方式

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

现在我需要在特定条件成立时显示不同的弹出窗口,并且我想知道最佳的处理方式是什么。

目前我正在评估两个选项,但我完全接受其他选项。


选项1

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

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


选项2

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

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


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


基于我迄今为止使用AngularJS模块的经验,我认为最优雅的方法是一种专用服务,我们可以提供一个部分(HTML)模板以模态显示。

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

AngularUI引导项目(http://angular-ui.github.com/bootstrap/)有一个很好的$modal服务(以前称为$对话框,在版本0.6.0之前),它是一个服务的实现来显示partial的内容作为模式弹出。


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

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

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

整个视频也非常有趣,以及观看:-)


  • 创建一个'popup'指令并将其应用到弹出式内容的容器中
  • 在指令中,将内容与其下面的mask 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://www.djcxy.com/p/88173.html

    上一篇: ups the most elegant way

    下一篇: What is the best way to conditionally apply attributes in AngularJS?