Question

我在ui-grids angular-ui-tabs，他们在ng-if内部，以避免渲染问题。如果有更多数据并且网格进入滚动模式，则单击选项卡时数据将完全消失。我相信这是一个ui-grids-bug - 有人可以帮助我吗？

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

我不完全确定，但也许浏览器窗口的视口/大小有效。

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

<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

这个问题是众所周知的（尽管在文档中只提到了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代替ng-show或ng-if哪个是引导标签使用的。基本上不要使用那些标签。 IE 11+也可以正常工作。无需触发刷新等。

解决方案在plunkr。

Answer 3

你需要在handleWindowResize（）之后设置滚动位置，如下所示：

'Foo Bar'

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

3 个答案: