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

第二種方法很難寫，它打破了代碼的流程。 這就像試圖將方形釘釘入圓孔一樣。

IMO DOM操作只發生在一個指令語句中更像是一個（非常）強烈推薦而不是硬規則。 它存在於人們 - 特別是Angular的新手 - 避免從服務和控制器中訪問DOM。

Answer 2

當我需要重構代碼時，我有完全相同的問題，允許在應用程序中使用更多對話框。 我們目前正在使用Angularjs 1.6。

我發現你可以在每個模板中加入一個指令，然后使用ng-show和ng-hide來顯示/隱藏模態。 但是，雖然使用DOM操作的指令是Angularjs中的約定，如前所述，在這個用例中，模態窗口的指令在控制器和模態指令之間創建緊密耦合。

在這個用例中使用服務是一個可接受的偏差，因為通過使用服務將模態注入到DOM中，它是根據需要而不是總是在頁面上的模態指令完成的，這使得這種方法更加動態並減少了耦合用模板。

作為另一個驗證，我發現Angular UI團隊使用相同的方法和模態服務： $ uibModal來創建模態窗口。