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;"> 

나는 의사도 스택 오버 플로우에 어떤 해결책을 찾을 수는 없지만, 그것은해야 나에게 보인다. 나는 몇 가지 도움말을 위해 약간의 도움을 사용할 수있다.

Answer 1

참고로, 나는 또 다른 유래 문제에 대한 해결책을 찾았지만, 나는 내 요구에 맞게 그것을 조금 변경 :

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

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

그래서 주요 아이디어는 그리드 사업부에 NG 스타일을 통해 높이를 변경하는 것입니다 이벤트를 실행하면 여기 이 showScoreDiv()으로 전화를 걸어 gridApi.grid.handleWindowResize()으로 전화해야합니다. handleWindowResize()을 호출하기 전에 타임 아웃을 사용하여 div에 좋은 시간으로 설정해야합니다.