最优雅的方式

 

我有这个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?