AngularJS UI 网格和弹出框对齐

Question

您好，我要向 AngularJS 中的 UI 网格添加弹出窗口。这个想法是当用户 mouse-over 一行时，弹出窗口将出现，并且弹出窗口包含一个指令。我已经成功实现了这部分，但现在的问题是弹出窗口的一部分被 ui 网格 table 挡住了，像这样：

我想将弹出窗口置于最前面，我已经尝试为 ui 网格 table 和弹出窗口设置 z-index。相关代码在这里：

JS部分：

function rowTemplate() {
    var template = [];
    ...
    template.push('popover-template="\'popover.html\'" popover-placement="bottom" popover-trigger="click"></div>');
    return template.join(' ' );
}

HTML:

<div class="gridStyle" ui-grid="vm.grid" ui-grid-resize-column ui-grid-selection style="margin-top:0px; height:200px; z-index: 4; position: relative">
</div>

<script type="text/ng-template" id="popover.html">
    <div style="height: 150px; width: 600px; overflow-x: auto; overflow-y: hidden; z-index: 10; position: relative">
        <directive-related part />
    </div>
</script>

但是我设置了z-index之后还是不行。我该如何解决这个问题？我的一些参考资料在这里：popover: popover, z-index: z-index.

谢谢！

Answer 1

注意：我在这里假设您使用的是 ui-bootstrap。

我发现通常您需要将 append-to-body 属性与 ui-grid 自定义格式一起使用。

尝试像这样更改模板以添加该属性：

template.push('popover-template="\'popover.html\'" popover-append-to-body="true" popover-placement="bottom" popover-trigger="click"></div>')

AngularJS UI 网格和弹出框对齐

AngularJS UI Grid and Popover alignment

angularjs

angular-ui-grid

popover