在Angular中构建Modal组件的正确方法

Question

我在jQuery中构建了一个Modal组件 我想将它集成到一个不使用jQuery的Angular应用程序中，我不只是想将它作为外部依赖项。我的意思是，我不会把它留作可以从控制器调用的东西，但不是指令或服务。

我感到困惑的是，如果在Angular服务（factory，service，provider）中使用DOM逻辑是一个好主意，或者我应该只是使用&表达式制作指令？或者两者兼而有之？

在内部控制器中，我希望能够注入Modal并调用方法来显示或隐藏模态并设置其内容。

这样做的正确方法是什么？ 我不是在寻找代码，而是指导如何实现“正确的Angular”实现。

谢谢。

Answer 1

在角度服务中回答关于dom逻辑的问题。不，这不是一个好主意，如果你真的想到它，就没有必要。你需要什么：

• 可以关闭/打开的模式
• 可以根据您是单击是还是取消
来执行回调

对于这个简单的功能，你肯定不需要任何dom逻辑，特别是你的服务中不需要任何dom逻辑。

您可以使用$modal服务并自行设置样式以使其看起来相同。看看这个plunkr：

http://plnkr.co/edit/WLJfs8axxMJ419N2osBY?p=preview

这很简单：

$modal.open({
    templateUrl: 'someTemplateOfTheModal',
    controller: SomeControllerOfTheModal,
})

您可以参考this了解选项。

否则，如果我们只是谈论如何将现有的jquery东西集成在角度中，我仍然建议以角度方式从头开始重建它。基本上用纯角度替换所有jquery触发器/事件功能。

例如，模式可以打开或关闭，可能有重叠或不重叠。模态本身可能用于在是和非取消时执行回调事件。您可能还希望使用自定义类对其进行样式设置，因此您应该考虑这一点。如果您从头开始重建，可能需要查看以下指令：

• ng-if / ng-show（可能会用于显示/隐藏您的模态和/或 叠加）
• ng-class（将用于注入您可能想要的任何自定义类 穿上你的模态）
• ng-include（如果您希望模态被模板化）
• ng-click（点击你的是/否/取消按钮点击事件 和/或点击远离模态或叠加）

你可以看到它可能会变得有点混乱，所以最好的方法是使用angular的$ modal服务，因为它具有内置的所有功能。我认为它拥有你可能想要的一个模态，你应该只设计它。但是，当然，出于学习目的，你可能想要重新发明轮子。