In Angularjs should a modal be a service or a directive?

Question

So I have been reading about directives, services and controllers. I felt like I had a good understanding of what goes where. For example dom manipulation happens in a directive, api calls happen in a service. Then I needed to make a modal. My fist thought was this is a directive, then I looked at Angular UI and they have it set up as a service. I was surprised to see it as a service. Is this the correct way to do it, or is this considered and anti pattern? I read that Angular UI is a good place to look when learning, but I'm not sure? A modal is more confusing then I expected.

Answer 1

The general rule in Angular is that DOM manipulation should take place only inside directives, and most of the time that rule applies. But there are some situations where a declarative approach doesn't feel right, to say the least, because those situations are intrinsically imperative. Modals and custom alerts are two examples, to name a few.

To exemplify what I'm saying, take a look at this example taken from a similar question I answered some time ago:

Imperative approach

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

Back in the day AngularUI's $modal was called $dialog.

Declarative approach

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

...

app.controller('Ctrl', function($scope) {
    $scope.doSomething = function() {    
        $scope.dialogVisible = true; 
    }

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

The second approach is awkward to write and it breaks the flow of the code. It's like trying to fit a square peg into a round hole.

IMO the DOM manipulation only happens in a directive statement is more like a (very) strong recommendation than a hard rule. It exists so people - especially newcomers to Angular - avoid accessing the DOM from within services and controllers.