angular-ui-bootstrap - ui-grid 在 angular-ui-tab 中消失

Question

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

插件:http://plnkr.co/edit/kDlS4zEPE0A0DrUHn0CJ?p=preview

我不完全确定，但浏览器窗口的视口(viewport)/大小可能会产生影响。

代码正如人们所期望的那样:

<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 的描述实现了一个 $interval .不幸的是，它不起作用 - 这是 plunkr: http://plnkr.co/edit/1d2UTOMl3bvtYHr7muTf?p=preview .

不完全确定我是否正确实现，但我做到了

$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，反之亦然)，它又是第一个完美呈现的，而第二个只显示第一个四项。

更新 2:

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

努力调查可能是其他图书馆，但我找不到。我想我将不得不使用 ng-views 和“伪造”选项卡，尽管它很难看。

Answer 1

这个问题在 this 内部是众所周知的(尽管仅在文档中提到了 uib-modal)。教程他们解释了如何解决它:你应该添加一个 $interval指示在更新后刷新网格一段时间，以便让选项卡花时间加载和呈现。

代码应如下所示:

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

在哪里 gridApi1在常规 onRegisterApi 中创建方法。

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