Ui-网格在 angular-ui-tab 中消失

Question

我已经 ui-grids in angular-ui-tabs，它们在 ng-if 中以避免呈现问题。如果有更多数据并且网格进入滚动模式，则单击选项卡时数据会完全消失。我相信这是一个 ui-grids-bug - 有人可以帮我吗？

Plunkr：http://plnkr.co/edit/kDlS4zEPE0A0DrUHn0CJ?p=preview

我不太确定，但也许浏览器 window 的 viewport/size 有影响。

代码如预期：

<uib-tabset justified="true">
    <uib-tab heading="tab" select="setTab('test')">
        <div class="row">
            <div class="col-md-12" ng-if="test">
                <div id="grid1" ui-grid="{ data: myData }" class="grid">
                </div>
            </div>
        </div>
    </uib-tab>
    <uib-tab heading="tab" select="setTab('test2')">
        <div class="row">
            <div class="col-md-12" ng-if="test2">
                <div id="grid2" ui-grid="{ data: myData2 }" class="grid">
                </div>
            </div>
        </div>
    </uib-tab>
</uib-tabset>

更新：

我按照 here. Unfortunately it doesn't work - here is the plunkr: http://plnkr.co/edit/1d2UTOMl3bvtYHr7muTf?p=preview 的描述实施了一个 $interval。

不完全确定我是否实施正确，但我实施了

$scope.myData = {
    onRegisterApi: function (gridApi) {
        $scope.gridApi = gridApi;

        // call resize every 200 ms for 2 s after modal finishes opening - usually only necessary on a bootstrap modal
        $interval( function() {
            console.log('in');
            $scope.gridApi.core.handleWindowResize();
            }, 10, 500);
        },
data: [....

并在 HTML

<div id="grid1" ui-grid="myData" class="grid"></div>

非常奇怪的是：在我的本地代码中，总是第二个选项卡消失，而不是第一个选项卡（第一个选项卡正确呈现）。第二个选项卡总是只显示前 4 个项目——所以它并没有完全消失。这一切看起来好像我第一眼就搞砸了我的代码，但如果我切换网格（将网格从选项卡 2 放入选项卡 1，反之亦然），它又是第一个完美呈现的，第二个只显示第一个四项。

更新二：

我实现了@imbalind 的解决方案（再次感谢），看来我这里还有一些其他问题。我假设还有其他一些库发生冲突，在我看来 ng-repeat 在第二个网格中以某种方式终止。 ui-grid-canvas div-容器实际上非常大，但除了前四项外是空的。

努力与其他图书馆一起调查它可能是，但我找不到。猜猜我将不得不使用 ng-views 和“伪造”标签，尽管它很丑。

Answer 1

这个问题是众所周知的（即使只在文档中提到 uib-modal）并且在 this 教程中他们解释了如何解决它：你应该添加一个 $interval 指令来刷新网格更新后一段时间，以便让选项卡有时间加载和呈现。

代码应该如下：

$scope.tabs[0].gridOptions.data = data; 
$interval( function() {
  $scope.gridApi1.core.handleWindowResize();
}, 10, 500);

其中 gridApi1 是在常规 onRegisterApi 方法中创建的。

如果需要，您可以查看教程中的代码以更好地理解。

Answer 2

使用 css: visibility: hidden 而不是 bootstrap 选项卡使用的 ng-show 或 ng-if。基本上取消这些选项卡。在 IE 11+ 中也能正常工作。无需触发刷新等

解决方案就在这个plunkr.

Answer 3

您需要在 handleWindowResize() 之后设置滚动位置，如下所示：

$scope.gridApi.core.handleWindowResize();    
$scope.gridApi.core.scrollTo($scope.data[0], $scope.columnDefs[0])

Ui-网格在 angular-ui-tab 中消失

Ui-grid disappears in angular-ui-tab

angular-ui

angular-ui-bootstrap

angular-ui-grid