javascript - 以 Angular 实现交互式弹出窗口/标注

Question

我们正在 Angular.js 中做一个项目，我们从用户体验人员那里获得的模型大量使用交互式弹出窗口/标注。

问题是我似乎无法以干净的方式将这些映射到 Angular 概念上。从概念上讲，它们需要自己的模板、 Controller ，并且需要在整个页面上创建和销毁它们。在不改变布局的情况下重叠元素。

Bootstrap 模态不被视为可接受的替代方案。创始人非常热衷于拥有指向页面上特定元素的交互式对话框。

有什么东西可以做到这一点吗？或者您有什么建议吗？

Answer 1

我会实现一个指令或一组指令，您可以在其他元素的焦点或模糊或鼠标悬停时显示这些指令。根据您的实现，您也许可以只使用一个打开 onFocus 或 onBLur 的指令。 Angular 1.2 支持 ng-focus、ng-mouseover 和 ng-blur，您可以利用它们来做这样的事情。

<div class="check-thing">
   <button class="checkmark" ng-mouseenter="showModal = true" ng-mouseleave="showModal = false"></button>
   <modal ng-show="showModal" model="modal-model"></modal>
</div>

然后只需让指令中的表单填充双向绑定(bind)模态模型，或者在用户单击 Controller 等待的确定时触发回调。将整个检查程序作为一个指令并重复使用它们可能会更好。

注意，这些在平板电脑或手机上都不是很友好，因为它们不支持悬停。