Question

使用动态内容创建模态对话框的最佳做法是什么，与没有动态内容的对话框形成对比。

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

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

组合这两种对话框的最佳做法是什么？感谢。

Answer 1

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，第一个例子看起来更好，而且更容易理解。

Answer 2

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

动态与静态内容并不是IMO的决策点。由于您可以从指令中访问作用域，因此可以从继承的作用域访问所需的任何内容。

Answer 3

一个效果很好的简单设计是：

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

改进是：

事件参数属性（控制器触发和接收时的设置）可以包括标题，消息，图像，甚至html（待消毒），按钮，回调这些按钮，显示持续时间（通过$超时）
记住一堆收到的提醒。当一个关闭时，下一个待处理的显示

角度模态对话框最佳实践

3 个答案: