ui-grid ng-style 动态高度答案

【问题标题】：ui-grid ng-style dynamic heightui-grid ng-style 动态高度
【发布时间】：2017-03-29 22:26:47
【问题描述】：

我有一个像这样使用的简单网格：

 <div id="planningGridDiv" 
    class="gridPatientContent"

    style="height: 450px;min-height: 300px;"

    ng-style="{height: showScores ? '150px': '450px'}"

    ui-grid-resize-columns
    ui-grid-selection
    ui-grid-cellNav
    ui-grid-pinning

    ui-grid="myData"
    class="grid">

  </div>

但是当 showScores 为 true 并且高度从 450 像素传递到 150 像素时，网格本身不会缩小。

第一个容器看到它的高度发生了变化，但这部分没有：

<div role="grid" ui-grid-one-bind-id-grid="'grid-container'" class="ui-grid-render-container ng-isolate-scope ui-grid-render-container-body" ng-style="{ 'margin-left': colContainer.getMargin('left') + 'px', 'margin-right': colContainer.getMargin('right') + 'px' }" ui-grid-render-container="" container-id="'body'" col-container-name="'body'" row-container-name="'body'" bind-scroll-horizontal="true" bind-scroll-vertical="true" enable-horizontal-scrollbar="grid.options.enableHorizontalScrollbar" enable-vertical-scrollbar="grid.options.enableVerticalScrollbar" aria-multiselectable="true" id="1490734763451-grid-container" style="margin-left: 180px; margin-right: 80px;">

我找不到关于 doc 或堆栈溢出的任何解决方案，但在我看来应该如此。我可以为一些指针使用一些帮助。

【问题讨论】：

标签： height ui-grid ng-style

【解决方案1】：

仅供参考，我在另一个 stackoverflow 问题上找到了解决方案，但我对其进行了一些更改以满足我的需要：

 $scope.showScoreDiv = function()
{
    $scope.showScores = !$scope.showScores;

    $timeout(function(){
         $scope.gridApi.grid.handleWindowResize();
    }, 1); 
};

所以主要思想是通过网格 div 上的 ng-style 更改高度，当你触发你的事件时，这里 showScores = true 由 showScoreDiv() 调用，你必须调用 gridApi.grid.handleWindowResize()。在调用handleWindowResize() 之前，超时只是为了给 div 一些时间设置为合适的高度。

【讨论】：