Angular 模态对话框最佳实践 [英] Angular modal dialog best practices

问题描述

与没有动态内容的对话框相比，创建具有动态内容的模态对话框的最佳做法是什么.

What is the best practice for creating modal dialogs with dynamic content, contrasted with dialogs that don't have dynamic content.

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

Eg.. We have some modal forms that accept a list of form elements, and have submit/cancel. Also, there are modal dialogs that just display a confirm/ok type of operation.

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

I've seen a lot of people saying that dialogs should be services passed into the controller, but it seems to me that services shouldn't be rendering UI components and manipulating the DOM.

组装这两种类型的对话框的最佳实践是什么?谢谢.

What is the best practice for assembling these two types of dialogs? Thanks.

推荐答案

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

Angular UI Boostrap provides a service - $dialog - that can be injected wherever you need to use a dialog box. That service has two main methods: dialog and messageBox. The former is used to create a dialog with dynamic content and the latter to create a message box with a title, a message and a set of buttons. Both return a promise so you can process its result, when it's available.

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

I think this approach works well, because it fits the somehow natural, imperative way of handling dialogs. For instance, if the user clicks on a button and you want to show a dialog and then process its result, the code could look like this:

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

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

You can indeed use directives to do the same, and perhaps it seems the right way to do it since there is DOM manipulation involved, but I think it would be kind of awkward to handle it. The previous example would be something like this:

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

IMO, the first example looks better and it's easier to understand.

这篇关于Angular 模态对话框最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！