Angular UI-Grid 支持 BootStrap 弹出框?

Angular UI-Grid Support for BootStrap Popover?

我正在尝试深入研究 Angular UI-Grid 的 API 以确保为我的单元格实现 Bootstrap 弹出窗口 header.我四处寻找,但找不到任何解决方案。

像这样 - plnkr.co/edit/UJJttN

我还试图让弹出窗口仅在 header 单元格中出现。有什么建议吗?

查看弹出窗口的 UI-Bootstrap 文档: https://angular-ui.github.io/bootstrap/#/popover

您在 plnkr 中使用的是旧版本 UI-Bootstrap,因此如果您升级,则需要更改属性 popover=""popover-template="",如果您升级到最新版本,则uib-popover=""uib-popover-template=""

也就是说,您可能会注意到弹出窗口文档中 uib-popover-template 属性旁边的 $ icon/badge(有一个没有徽章的副本,不知道为什么它在那里。)

从文档中的图标键,$ icon/badge 表示如下:

This setting expects an angular expression instead of a literal string. If the expression support a boolean / integer, you can pass it directly.

您需要将 URL 放入范围变量中的弹出框模板,并在 popover-template="ANGULAR.EXPRESSION" 中的 angular 表达式中引用它,而不是将其传递给文字字符串,和你一样。

我已经修改了你的 plnkr 以这样做,现在弹出窗口可以按预期工作。 http://plnkr.co/edit/qc8MNQKch1IIdz2zVtRX?p=preview

仅针对header的弹出窗口 您能否澄清一下,您希望弹出窗口仅显示 header 列?在这种情况下,您需要使用 headerCellTemplate,而不是 cellTemplate。我还修改了您的 plnkr 以展示如何执行此操作。将鼠标悬停在网格 2 的角色列 header 上以查看此内容,并检查添加到 plnkr 的模板文件。

在您的 plnkr 示例中,您在静态弹出窗口(网格 1)和模板弹出窗口(网格 2)中引用单元格数据。这只是为了测试目的吗? headerCellTemplate 无法为单元格数据引用 'row'。

希望对您有所帮助!