第二次打开 $modal 会中断 ui-grid 维度计算

Question

我有一个 angular-bootstrap $modal 里面有一个 ui-grid 指令。第一次打开模态没有问题。第二次，ui-grid 容器元素最初似乎都具有 0 的 offsetWidth/Height，这搞乱了它的内部高度计算 - 网格没有正确呈现和父 div现在高了 400 像素。

使用 ui-grid auto-resizing 是可行的，但我很想避免这种消耗性能的事件。如果我必须使用它，我会去抖动它，无论如何我都可以，但我正在寻找更好的解释。

通过 CSS 将 width/height 应用于网格指令无效。

通过内联 style 应用 width/height 确实有效。

似乎是第二次，模态渲染速度比 css 可以应用？我不知道为什么会这样。

调试 ui-grid 内的元素宽度（使用 offsetWidth/Height）总是第一次显示正确的值，但随后的打开显示所有值都为 "0".

使用Angular 1.3.15，angular-bootrstrap 0.12.1，ui-grid 3.0.0rc2

调用模态：

$modal.open({
    templateUrl: 'someModal.html',
    controller: 'SomeModalController'
});

模板有一些表单字段，指令：

<div style="width:367px;height:122px;" ui-grid="gridOptions" ui-grid-selection class="grid"></div>

在主 ui-grid 指令的 post 方法中，元素的 offsetWidth/Height 第二次始终为零，但是如果我使用 setTimeout 作为 10ms，尺寸报告正确。

Answer 1

由于每次在初始加载后都会发生这种情况，所以正如您自己所说，这是一个时间问题。通过 setTimeout、debounce 或 ui-grid-auto-resizing.

解决

Answer 2

查看模式教程中的代码 - 它设置超时然后调用 grid.handleResize。这可能就是您所需要的。 http://ui-grid.info/docs/#/tutorial/110_grid_in_modal

第二次打开 $modal 会中断 ui-grid 维度计算

Opening $modal a second time breaks ui-grid dimension calculations

angularjs

angular-bootstrap

angular-ui-grid