8

与没有动态内容的对话框相比，创建具有动态内容的模式对话框的最佳实践是什么。

例如..我们有一些接受表单元素列表的模态表单，并具有提交/取消。此外，还有一些模态对话框仅显示确认/确定类型的操作。

我看到很多人说对话框应该是传递给控制器​​的服务，但在我看来，服务不应该呈现 UI 组件和操纵 DOM。

组装这两种类型的对话框的最佳做法是什么？谢谢。

4

3 回答 3

6

Angular UI Boostrap 提供了一个服务——$dialog可以在任何你需要使用对话框的地方注入。该服务有两种主要方法：dialog和messageBox. 前者用于创建具有动态内容的对话框，后者用于创建带有标题、消息和一组按钮的消息框。两者都返回一个承诺，以便您可以在它可用时处理它的结果。

我认为这种方法效果很好，因为它符合某种自然的、命令式的对话处理方式。例如，如果用户单击一个按钮，并且您想显示一个对话框然后处理其结果，则代码可能如下所示：

$scope.doSomething = function() {
    $dialog.dialog().open().then(function(result) {
       if (result === OK) {
           // Process OK
       }
       else {
           // Process anything else
       }
    });
}

您确实可以使用指令来做同样的事情，也许这似乎是正确的方法，因为涉及到 DOM 操作，但我认为处理它会有点尴尬。前面的例子是这样的：

<dialog visible="dialogVisible" callback="dialogCallback()"></dialog>

...

$scope.doSomething = function() {   
    $scope.dialogVisible = true; 
}

$scope.dialogCallback = function(result) {
    if (result === OK) {
        // Process OK
    }
    else {
       // Process anything else
    }
}

IMO，第一个例子看起来更好，更容易理解。

于 2013-08-29T17:01:34.647 回答
2

由于对话框是 DOM 组件，它们可能应该是指令。您可以在指令本身内部构建模态的 DOM 元素，也可以将主 html 页面上的元素隐藏并从指令中取消隐藏它们。如果您不隔离指令的范围，则可以只从指令中引用控制器范围（除非您在子范围中）。

动态与静态内容并不是 IMO 的决定点。由于您可以从指令中访问范围，因此您可以从继承的范围中访问您需要的任何内容。

于 2013-08-29T16:26:36.870 回答
1

一种运行良好的非常简单的设计是：

  1. 在您的 html 中某处有这样一个“模态对话框”div 。它通常是绝对的，占用所有屏幕宽度和高度（通常是一个带有较小对话框 div 的深色半透明 div）并且默认情况下不显示（使用 ng-show 有条件地显示它，取决于是否存在模态框)
  2. 声明一个监听对话框事件（“dialogShow”、“dialogClose”等）的控制器，并在接收到它们时更改其“currentModal”$scope 值。根据上一步设置的ng-show条件，modal会相应的显示或改变或消失（如果设置为null/undefined）
  3. 使用广播从应用程序中的任何位置触发对话事件。

改进如下：

  • 事件参数属性（由控制器触发和接收时设置）可以包括标题、消息、图像，甚至 html（待清理）、按钮、这些按钮的回调、显示持续时间（通过 $timeout）
  • 记住一堆收到的警报。当一个关闭时，显示下一个待处理的
于 2013-12-09T14:35:51.777 回答