所以我一直在阅读指令，服务和控制器。我觉得我很清楚什么在哪里。例如，dom操作在指令中发生，api调用在服务中发生。然后我需要制作一个模态。我的第一个想法是这是一个指令，然后我看了Angular UI，他们将它设置为服务。我很惊讶地看到它是一项服务。这是正确的方法，还是这种考虑和反模式？我读到Angular UI是学习时的好地方，但我不确定？模态比我预期的更令人困惑。
答案 0 :(得分：3)
Angular中的一般规则是DOM操作应仅在指令内部进行，并且大多数情况下该规则适用。但是在某些情况下，声明式方法并没有感觉正确，至少可以说，因为这些情况本质上是必要的。模态和自定义警报就是两个例子，仅举几例。
为了举例说明我所说的话，请看一下前一段时间我回答的a similar question这个例子：
势在必行的方法
clean() 回到当天，AngularUI的app.controller('Ctrl', function($scope, $dialog) {
$scope.doSomething = function() {
$dialog.dialog().open().then(function(result) {
if (result === 'OK') {
// Process OK
}
else {
// Process anything else
}
});
}
});
被称为$modal 。
陈述性方法
$dialog第二种方法很难写，它打破了代码的流程。这就像试图将方形钉钉入圆孔一样。
IMO DOM操作只发生在指令语句中更像是一个（非常）强烈推荐而不是硬规则。它存在于人们 - 特别是Angular的新手 - 避免从服务和控制器中访问DOM。
答案 1 :(得分：0)
当我需要重构代码时，我有完全相同的问题，允许在应用程序中使用更多对话框。我们目前正在使用Angularjs 1.6。
我发现您可以将指令放入每个模板中，然后使用ng-show和ng-hide显示/隐藏模态。然而，虽然使用DOM操作的指令是Angularjs中的一种约定，如前所述，在这个用例中，模态窗口的指令在控制器和模态指令之间创建紧密耦合。
在此用例中使用服务是可接受的偏差，因为通过使用服务将模式注入DOM，它是根据需要而不是总是在页面上的模态指令完成的，这使得这种方法更具动态性减少与模板的耦合。
作为另一个验证，我发现Angular UI团队使用相同的方法和模态服务：$uibModal来创建模态窗口。