AngularJS ng-Grid启动最小化了吗？

Question

I'm using ng-Grid v2.0.7, and the problem is that the first time that ng-grid shows, it is minimized. Here is a picture of what I mean:

Only after clicking on the minimized table (the top picture), the full table displays normally (the bottom picture).. Here is the code I'm using:

$scope.gridOptions = {
    data: 'jsonData.value',
    multiSelect: false
};

Why is this happening?

EDIT: Here is the definition in the html file:

<div class="gridStyle" ng-show="(dataViewType == 'table')" ng-grid="gridOptions"></div>

Answer 1

Try to use the ng-cloak directive on your grid element.

For example on a simple div :

<div ng-cloak></div> 

"The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display."

Docs : http://docs.angularjs.org/api/ng.directive:ngCloak

Answer 2

I had a similar problem and it was caused by CSS properties.

It was because I set height & width as percentages, rather than a fixed number of pixels.

Changing them to a fixed number of pixels removed the problem (leaving me only with the problem of what values to choose to accommodate my dynamic JSON data).

I ended up with this in my controller:

    $scope.getTableStyle= function() {
       var rowHeight=30;
       var headerHeight=45;
       return {
          height: (gridHeaderHeight + 1 + 
                  ($scope.myGrid.length * (gridRowHieght + 1))) + "px"
       };
    };  

and this in my HTML

   <div ng-show="myGrid" class="gridStyle" ng-grid="gridOptions" 
        ng-style="getTableStyle()" ng-cloak></div>

In order to calculate the grid size whenever I periodically fetch new JSON data from the server.