在Angular JS中处理模态的最简单方法是什么？

Question

问题:如何在Angular JS控制器中管理一堆模态？

我把它们放在我的视图的底部并使用http://angular-ui.github.io/bootstrap/#/modal, 但我最终得到了大型html模板(可行),但感觉效率低下.

我尝试过的:

• 来自UI-Bootstrap的$ dialog(痛苦的对接)
• 存储在模板中的模式通过ng-include包含使用UI-Bootstrap的模态
• 模态放在我的视图底部的控制器<<当前打开并正在工作

这感觉就像我错过了什么.有什么指针吗？

编辑:

我做了很多搜索并找到了一个脚本然后升级了一下:

• 你的模态是外部模板
• 它们也在您单击按钮的范围内
• 3种不同(确认,消息,加载模板)

https://github.com/clouddueling/angularjs-modals

更新

我已经回复了这个问题:http://clouddueling.github.io/angular-common/

Answer 1

正如rGil所说的那样,使用一个指令,你自己而不是UI-Bootstrap,如果它似乎太复杂了.你的所有模态都会相似,或多或少.您只需要一个模板和2-3个范围变量来填充模态.然后,您可以传递参数以打开和关闭模态,并提供更多功能.你包含的越多,指令就越大.

第二种选择是使用这些模态创建单独的HTML部分,然后使用ngInclude将它们放在视图中.如果您的模态不同,但在多个页面上经常重复使用,这将节省大量时间.这方面的缺点是你仍需要打开和关闭它.Angular的方法是编写一个指令来处理切换,如果这就是你需要的全部内容.简单的方法是编写一个小jQuery并打开点击或其他任何模式.

老实说,这归结为你的舒适程度.jQuery会破坏你的代码吗？不,但它不是"Angular Way".使用jQuery,我可以在3-4行代码中编写模态切换.这样做Angular Way是一个指令和十几行代码.但Angular方式具有将来编写标记的好处,不再需要代码.如果我只有一个模态,我可以在jQuery中完成.如果我有多个模态,就像你的情况一样,我可能会花时间去学习指令,然后想出一个能让我想要它起作用的指令.