UI-グリッドNGスタイルのダイナミックな高さ

Question

私はこのように使用される単純なグリッドました：

<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が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やスタックオーバーフロー上の任意の解決策を見つけることはできませんが、それはそれが必要と私には思えます。私はいくつかの助けにいくつかの助けを使うことができます。

Answer 1

はFYI、私は別のstackoverflowの質問に解決策を見つけたが、私は私のニーズに合うように、それを少し変更：

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

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

だから、主なアイデアは、グリッドのdivにNGスタイルを経由して高さを変更することですイベントを発生させるときは、showScoreDiv()によって呼び出されるshowScores = trueここにgridApi.grid.handleWindowResize()と呼ぶ必要があります。 handleWindowResize()を呼び出す前にタイムアウトを設定すると、divに良い高さに設定する時間が与えられます。