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

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

现在我需要在特定条件变为现实时显示不同的弹出窗口，我想知道最好的方法是什么

目前我正在评估两个选项，但我绝对愿意接受其他选项

---

选择1 我可以为弹出窗口创建新的HTML元素，并直接从控制器附加到DOM

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

---

选择2 我总是可以在静态HTML文件中插入所有弹出窗口的代码。然后，使用

ngShow

，我只能隐藏/显示正确的弹出窗口

这个选项实际上是不可伸缩的

---

---

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

这很有趣，因为我自己在学习，在Youtube上观看了他们频道的一些视频。 演讲者在28:30分钟左右的视频中提到了你的确切问题

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

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

---

整个视频也很有趣：-）

根据我对AngularJS modals的经验，到目前为止，我认为最优雅的方法是提供一个专用服务，我们可以提供一个部分（HTML）模板，以模式显示

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

AngularUI bootstrap项目（）有一个出色的

$modal

服务（在0.6.0版本之前被称为$dialog），它是一个将部分内容显示为模态弹出窗口的服务实现。

• 创建“popup”指令并将其应用于弹出内容的容器
• 在指令中，将内容包装在绝对位置div及其下方的掩码div中
• 可以根据需要从指令中移动DOM树中的2个div。指令中的任何UI代码都可以，包括将弹出窗口放置在屏幕中央的代码
• 创建布尔标志并将其绑定到控制器。此标志将控制可见性
• 创建绑定到OK/Cancel函数等的范围变量

编辑以添加高级示例（非功能性）

....
....
....
....
.directive（'popup'，function（）{
var p={
链接：功能（范围、IELENT、iAttrs）{
//用abs pos div（parentDiv）包装div（IEElement）的代码
//用于在后面添加遮罩层div的代码
//如果父级已存在，则跳过再次添加。
//使用jQueryUI使其可拖动等。
监视范围（显示弹出窗口、功能（新值、旧值）{
如果（newVal==true）{
$（parentDiv.show（）；
} 
否则{
$（parentDiv.hide（）；
}
});
}
}
返回p；
});

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

请参阅 对于一个简单的方式做模态对话框与角度和无需引导

---

编辑：我一直在使用ng对话框，它很灵活，没有任何依赖性。

很多方法，html控制器显然不是一个好方法，请看UI引导模式AngularJS的文档，在“”部分下解释如何管理弹出窗口。希望这能有所帮助。如果你真的想用弹出窗口来缩放，那就看看吧。米斯科是angular的种子！（哈哈）。说真的，tho。将他的话视为angular的最终来源。angular-bootstrap 0.6以后的版本已将$dialog替换为$modal。这意味着您需要更改所有使用$dialog的代码，因为它已被弃用，并将其写入$modal$dialog中$modal@pkozlowski.opensource我喜欢ui引导的方法，但我似乎不能用模式排除内容。我研究过一些，看到其他人也有这个问题。我发现这篇文章非常有用。只需提一下，服务不应该访问DOM。“超光速”这确实是一个很好的一般规则，但知道为什么某个规则是同步的，并理解何时可以（甚至应该！）打破这一规则也是上帝的职责。我相信情态动词/工具提示等都是例外。简言之：一个人需要知道规则，但也需要了解规则适用/不适用的上下文。$watch而不是'watch'。另外，在

范围内，它不是“popup”而不是“showPopup”。watch（showPopup，function（newVal，oldVal）{

？我刚刚用这种方法进行了一次快速冲刺，结果发现这对于单一的弹出式/模式方法来说是非常好的，但是想想这个特殊的用户体验：假设一个客户正在订购一个项目，UI会显示一个确认订单弹出窗口（所以我们用内容“占据”了Adam的弹出窗口）.现在，我们从该弹出窗口中单击send或buy或其他任何内容，出现一个错误，用户需要在上一个屏幕中修改该顺序。我想在顶层的另一个弹出窗口中显示该错误。我不相信这种方法不会促进这一点。是的，但我认为不止一个弹出窗口可能是一个糟糕的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;
});