178

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

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

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

选项1

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

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

选项 2

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

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

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

4

5 回答 5

88

根据我迄今为止对 AngularJS 模态的经验，我认为最优雅的方法是提供一个专用服务，我们可以提供一个部分 (HTML) 模板以在模态中显示。

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

AngularUI 引导项目 ( http://angular-ui.github.com/bootstrap/ ) 有一个出色的$modal服务（在 0.6.0 版本之前曾被称为 $dialog），它是一个服务的实现，可以将部分内容显示为模态弹出窗口。

于 2013-04-04T14:20:21.140 回答
29

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

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

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

整个视频也很有趣:-)

于 2013-04-04T13:25:21.860 回答
14
  • 创建一个“弹出”指令并将其应用于弹出内容的容器
  • 在指令中，将内容包装在绝对位置的 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;
});
于 2013-04-04T14:48:54.150 回答
14

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

编辑：我一直在使用来自http://likeastore.github.io/ngDialog的 ng-dialog，它很灵活，没有任何依赖关系。

于 2014-02-13T07:20:32.047 回答
7

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

于 2013-04-11T20:15:45.013 回答