ng-grid在页面加载时不会占用100%的宽度,但在调整大小时显示正常

Question

带有角度js的ng网格在页面加载时不会占用100%的宽度.这是我的代码:

    <tabs ng-cloak>
        <pane title="Test Plan">
            <tabs>
                <pane title="Include Tests">
                    <div ng-controller="includedTestPlanGridCntrl">
                        <div class="gridStyle" ng-grid="gridOptions"></div>
                    </div>
                </pane>
                <pane title="Excluded Tests">
                    <div ng-controller="excludedTestPlanGridCntrl">
                        <div class="gridStyle1" ng-grid="gridOptions"></div>
                    </div>
                </pane>
            </tabs>
        </pane>
        <pane title="Advanced Planning">
            Some text here
        </pane>
    </tabs>

如果我调整大小,网格会正确显示.

Answer 1

我使用Angular UI Bootstrap中的选项卡时遇到了同样的问题。

resize最简单的修复方法是在 ng-grid 的父元素上触发事件，
最好是在选择包含 ng-grid 的选项卡时。

当触发此事件时，ng-grid 将正确调整自身大小。

使用这样的东西：

function onTabSelect() {
  $('.grid-container').trigger('resize');
}

Answer 2

这对我有用

$scope.gridOptions = {
        data: 'gridData',
        init:function(grid,$scope) {
            setTimeout(function() {
                $scope.gridOptions.$gridServices.DomUtilityService.RebuildGrid(
                    $scope.gridOptions.$gridScope,
                    $scope.gridOptions.ngGrid
                );
            },1000);
        }
    };

将"gridOptions"替换为您使用的变量和宾果游戏!

Answer 3

尝试将 ng-if 设置为仅在有数据显示时包含网格：（ng-hide 对我不起作用）

<div class="gridStyle" ng-grid="gridOptions" ng-if="myViewModel.Data.length"></div>

来源： https: //github.com/angular-ui/ng-grid/issues/855

相关问题：当​​ ng-grid 通过 ng-hide 将可见性从不可见更改为可见时，网格宽度不会被重新计算

Answer 4

我已经为此制定了解决方案。

只需在 ng.EventProvider 内的 ng-grid.js 中添加以下行即可。

setInterval(function() {
    domUtilityService.RebuildGrid($scope,grid);
}, 30);