为什么我的 UI Grid 单元格上没有显示模板化的 UI Bootstrap 弹出框

Question

我有一个简单的AngularJS 解决方案，它使用Angular UI Grid 呈现表格。每当显示一个值数组的属性时，我想显示数组中的第一个元素并在用户单击单元格时显示一个弹出窗口。我使用UI Bootstrap 来渲染弹出框。

显示此模板的软件拼接如下（详情请参阅this plunker）：

• UI 网格配置（我希望为角色列中的条目显示弹出框）：

  $scope.gridOptionsPopoverTemplate = {
     columnDefs: [
       { name: 'name',    width:128},
       { name: 'balance', width:128},
       { name: 'city',    width:128},
       { name: 'roles',   width:128, field: 'roles', cellTemplate: 'iq_cellTemplate_2.html', cellClass: 'cellPopover'}
     ]
  };
  

• cellTemplate定义，iq_cellTemplate_2.html，如下：

  <div popover-template="iq_popoverTemplate.html" 
      popover-title='Title'
      popover-trigger="click" 
      popover-placement="right" 
      popover-append-to-body="true">{{grid.getCellValue(row, col)[0]}}
  </div>
  

• 在popover中渲染角色的模板，如下：

  <div ng-repeat="role in grid.getCellValue(row, col)">
     <p>role</p>
  </div>
  

不幸的是，它不起作用，观察到的行为是在没有任何其他可观察到的症状的情况下没有呈现弹出框。您还会注意到 plunker 有两个部分，另一个部分演示了 popover 的显示，而不是使用 popover-template 指令，而是使用 popover 指令。

另外请注意，我已经能够使用Bootstrap popover 渲染弹出框，如this plunker 所示。它几乎可以工作，因为在弹出窗口溢出 UI Grid 视口（覆盖：滚动；）的情况下，溢出的部分被隐藏。

如果弹出框附加到 UI Grid 视口范围之外的元素，则可以显示弹出框，这在使用 popover 指令时由 UI Bootstrap 完成，但在使用 popover-template 指令时会失败。

在我编写额外的自定义代码来处理这个问题之前，我想问问是否有人有任何想法或建议。提前感谢您的帮助。

Answer 1

这个答案分为两部分：

• UI Bootstrap还不支持；源码见cmets：

  /**
   * The following features are still outstanding: popup delay, animation as a
   * function, placement as a function, inside, support for more triggers than
   * just mouse enter/leave, html popovers, and selector delegatation.
  

• Bootstrap popover 支持所需的行为。我通过将弹出框附加到身体来解决它

  var popover = $(element).popover({
    trigger: 'hover',
    html: true,
    container: 'body',
    content: template,
    title: scope.title,
    placement: 'right'
  });