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'。
希望对您有所帮助!
我正在尝试深入研究 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'。
希望对您有所帮助!