在Angularjs中,模态应该是服务还是指令？

Question

所以我一直在阅读指令,服务和控制器.我觉得我很清楚什么在哪里.例如,dom操作在指令中发生,api调用在服务中发生.然后我需要制作一个模态.我的第一个想法是这是一个指令,然后我看了Angular UI,他们将它设置为服务.我很惊讶地看到这是一项服务.这是正确的方法,还是这种考虑和反模式？我读到Angular UI是学习时的好地方,但我不确定？模式比我预期的更令人困惑.

Answer 1

Angular 中的一般规则是 DOM 操作只能在指令内部进行，并且大多数情况下都适用该规则。但至少可以说，在某些情况下，声明式方法感​​觉并不正确，因为这些情况本质上是必要的。仅举几个例子，模态和自定义警报就是两个例子。

为了举例说明我所说的，请看一下我之前回答过的类似问题中的示例：

命令式方法

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

那时 AngularUI$modal被称为$dialog.

声明式方法

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

第二种方法写起来很尴尬，而且破坏了代码的流程。这就像试图将方钉装入圆孔中一样。

在我看来，DOM 操作仅发生在指令语句中，这更像是（非常）强烈的建议，而不是硬性规则。它的存在是为了让人们——尤其是 Angular 的新手——避免从服务和控制器中访问 DOM。