以角度实现交互式弹出/标注

Question

我们正在Angular.js做一个项目，我们从UX用户那里获得的样机大量使用交互式弹出/标注。

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

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>

然后只需让指令中的表单填充双向绑定模态模型，或者在用户单击“控制器等待的正常”时触发回调。将整个检查器事物作为指令并在重复中使用它们甚至可能更好。

小心，这些都不会在平板电脑或手机上非常友好，因为它们不会轻易支持悬停。

Answer 2

你看过AngularUI Bootstrap模态吗？ （http://angular-ui.github.io/bootstrap/#/modal）它们非常适合AngularJS，并且可以真正地设计成几乎任何你想要的外观。传递数据并获取数据非常容易。大多数用户体验人员似乎并不了解网络是如何工作的（无论如何我似乎都没有），这对我和我的团队来说都是一个真正的救世主。

Answer 3

我知道这是一篇较旧的帖子，但由于答案从未被选中，我想指出我最近遇到的一个可能的解决方案。

Angular UI BS Popover允许您将其与您定位的元素对齐，可以是点击，胡佛和焦点。

对于内容，您可以选择文本，HTML格式的字符串和模板。基于这个问题，模板可能是用于允许内容动态并包含交互的模板。

您可以在https://angular-ui.github.io/bootstrap/

找到有关其工作原理的更多信息和演示