3

我正在尝试深入研究 Angular UI-Grid 的 API，以确保为我的单元格标题实现 Bootstrap Popover。我一直在四处寻找，但找不到任何解决方案。

像这样的东西 - plnkr.co/edit/UJJttN

我也试图让弹出框只发生在标题单元格中。有什么建议么？

4

1 回答 1

6

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

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

话虽如此，您可能会注意到弹出文档中的属性旁边有一个$uib-popover-template图标/徽章（有一个没有徽章的副本，不确定它为什么在那里。）

从文档中的 icon 键，$ icon/badge 的含义如下：

此设置需要角度表达式而不是文字字符串。如果表达式支持布尔/整数，您可以直接传递它。

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

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

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

在您的 plnkr 示例中，您在静态弹出框（网格 1）和模板弹出框（网格 2）中引用单元格数据。这只是为了测试目的吗？headerCellTemplate 无法引用单元格数据的“行”。

我希望这是有帮助的！

于 2016-06-17T18:03:49.723 回答