AngularJS ng-Grid开始最小化？

Question

我正在使用ng-Grid v2.0.7，问题在于ng-grid第一次显示，它被最小化了。这是我的意思的图片：

只有在点击最小化的表格（顶部图片）后，才能正常显示整个表格（底部图片）。 这是我正在使用的代码：

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

为什么会这样？

编辑：这是html文件中的定义：

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

Answer 1

尝试在网格元素上使用ng-cloak指令。

例如在一个简单的div上：

<div ng-cloak></div> 

  

“ngCloak指令用于阻止Angular html模板   来自浏览器的原始（未编译）短暂显示   在您的应用程序加载时表单。使用此指令可以避免   由html模板显示引起的不良闪烁效应。“

文档：http://docs.angularjs.org/api/ng.directive:ngCloak

Answer 2

我有类似的问题，它是由CSS属性引起的。

因为我设定了高度和高度。宽度为百分比，而不是固定数量的像素。

将它们更改为固定数量的像素可以解决问题（只留下选择适合我的动态JSON数据的值的问题）。

我最终在控制器中找到了这个：

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

这在我的HTML中

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

每当我定期从服务器获取新的JSON数据时，为了计算网格大小。