3

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

ui popover - 对话框示例

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

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

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

4

3 回答 3

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>

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

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

于 2013-09-18T20:35:59.270 回答
1

你看过 AngularUI 引导模式吗？( http://angular-ui.github.io/bootstrap/#/modal ) 它们非常适合 AngularJS 并且可以真正设计成几乎任何你想要的外观。传入和取出数据非常容易。大多数 UX 人员似乎并不了解网络是如何工作的（我的似乎也不了解），而这些对我和我的团队来说是一个真正的救星。

于 2013-09-18T20:42:18.627 回答
0

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

Angular UI BS Popover 允许你让它与你的目标元素对齐，可以是点击、悬停和焦点。

对于内容，您可以在文本、HTML 格式的字符串和模板之间进行选择。根据这个问题，模板很可能是用于允许内容动态并包含交互的模板。

您可以在以下位置找到有关其工作原理的更多信息和演示：https ://angular-ui.github.io/bootstrap/

于 2018-03-26T22:58:03.790 回答