Angular modal dialog best practices

Question

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.

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.

Answer 1

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
       }
    });
}

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, the first example looks better and it's easier to understand.