使用Angular和Bootstrap-UI构建的UI-Grid不会自行调整大小，直到以某种方式调整窗口大小

Question

这里的第一部分是以部分和形式显示网格。 他们能够将此网格导出到Excel或Crystal Reports。 我包含了有助于构建网格的gridOptions和作为gridOptions很大一部分的columnDefs。 每个列都有一个定义，我使用了每个列中的最大数据来确定列的大小。 这决定了整个网格的大小，但是容器仍然适合可见区域。 有一个水平滚动。 我唯一的问题是，只有在调整窗口大小时才能激活此功能。 以任何方式最大化，最小化，调整大小，更改，网格将像理想的那样适合。 否则，容器不会像预期的那样停在可视区域中，而是一直围绕网格的宽度延伸。

有谁遇到过类似的事情了吗？ 如果很简单，我只需要通过$ interval用0来运行某个东西，那将是一件很开心的事，但这是非常有问题的行为。 这是大量的代码，但是angular，bootstrap和bootstrap ui是最新的和标准的。 UI-Grid是RC20（ui-grid-v3.0.0-rc.20-746a476-2015-03-19）。 让我们知道您是否有任何疑问，或者是否还有其他我可以提供的信息。 我想我可以从窗口中人为地触发一个调整大小的事件，而这足以满足需要，同时我摆脱了微调器。

<section id="gridTemplate" ng-controller="gridCtrl">
    <h1 class="g-report-title">{{pageInfo.title}}</h1>
    <form role="form">
        <grid class="masked grid" id="grid1" spinner-key="spinnerGrid" spinner-start-active="true" ui-grid="gridOptions" external-scopes="$scope">
        </grid>
        <fieldset class="buttons" ng-controller="reportController">
            <button ng-hide="bPrint" class="btn btn-small btn-default" ng-click="printReport()">Report</button>
            <button ng-hide="bExport" class="btn btn-small btn-default" ng-click="exportData()">Export</button>
        </fieldset>
    </form>
</section>

gridOptions大多是这样的：

 $scope.gridOptions = {
        enableSorting: true,
        showHeader: true,
        enableRowSelection: true,
        multiSelect: true,
        data: $scope.data,
        columnDefs: columnDefs,
        // needs more review and may only be applicable to editable grids
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
            gridApi.selection.on.rowSelectionChanged($scope, function (row) {
                var msg = 'row selected ' + row.isSelected;
                alert(msg);
            });
            ...
        }
    };

除此之外，还有很多事情要做，但是columnDefs通常最终会像这样最终获得基于内容的大小估算：

for (var col in finalRow) {
    var def     = {};
    def.field   = col;
    var label   = col.replace('_', ' ');
    label       = label[0].toUpperCase() + label.substr(1, label.length);
    def.title   = label;
    def.visible = true;

    switch ($rootScope.pageInfo.reportName) {
        case 'CSOpenClaimsCache':
        case 'OpenClaimsOlderThanDate':
            if (col === 'Status' || col === 'CloseDate' || col === 'Resp' || col==='DSMNameAssigned' || col==='DSMName') {
                def.visible = false;
            }
        break;
    }
    def.width = maxColumnWidth[col];
    columnDefs.push(def);
}

@mainguy辅助的解决方案

$(window).trigger('resize');
$scope.stopSpin('spinnerGrid');

stopSpin（）的函数def

/*
 * stopSpin - static function wrapper to attach to $scope of high
 * lvl controller
 * $param string      key   Spinner key to stop
 * $param boolean  keep Keep the spinner, just hide it
 * $return void
 */
$scope.stopSpin = function (key, keep) {
  //better have injected this. It's very configurable, globally and individually
  usSpinnerService.stop(key, keep);
}

Answer 1

该解决方案由@mainguy提供帮助。 我将此卡在生成并放置网格的控制器中。 在关闭微调器（即已加载）之前，我发送了resize事件。 看起来像一种魅力。 如果发现任何问题，我会报告。

//$ is mapped to angular.element in my constants file
$(window).trigger('resize');
$scope.stopSpin('spinnerGrid');

stopSpin（）的函数def

/*
 * stopSpin - static function wrapper to attach to $scope of high
 * lvl controller
 * $param string     key   Spinner key to stop
 * $param boolean    keep  Keep the spinner, just hide it
 * $return void
 */
$scope.stopSpin = function (key, keep) {
  //better have injected this. It's very configurable, globally and individually
  usSpinnerService.stop(key, keep);
}