除非调整浏览器窗口大小,否则Angular ui网格不显示内容

Question

我使用angularjs 1.5.0与角度ui网格3.1.1.当我在控制器体中分配gridOptions(传递给grid指令)对象时,如下所示:

$scope.gridOptions = {
      data: [{"mock2": 1, "mock1": 2}, {"mock2": 10, "mock1": 22} ]
    };

HTML:

    <div ui-grid="gridOptions"></div>

它按预期显示表格.但是当我尝试更改$ scope.on中的数据时:

$scope.$on('update', function (event, passedFromBroadcast) {
      $scope.gridOptions.data= [{"mock2": "set", "mock1": "inside"}, {"mock2": "$scope", "mock1": "on"} ] ;
    });

它只呈现表格的框架,当包括分页时,它也会呈现与分页相关的控件 - 但不会呈现内容本身.仅在我调整浏览器窗口大小后才会显示内容(行和列标题).

1. 当$ scope.on中的数据发生变化时,为什么angular-ui网格不更新表内容？

2. 如何手动更新角度ui网格表？ 我已经尝试过的事情:

   $scope.gridApi.core.handleWindowResize(); // Does not work
   $scope.gridApi.core.refresh(); // Does not work
   $timeout(function(){$scope.gridOptions.data= [{"mock2": "set", "mock1": "inside"}, {"mock2": "$scope", "mock1": "on"} ] ;}) // Does not work
   

Answer 1

此代码有两个问题，但表格内容仅在浏览器窗口调整大小后显示的原因是缺少定义宽度和高度的 css 类，基本（工作）示例：

    .grid {
      width: 500px;
      height: 250px;
     }

在 HTML 中：

    <div class="grid" ui-grid="gridOptions"></div>

其他问题（此线程中的其他人提到过：

• 分配 gridOption 字段（ data 和columnDefs）必须在 $timeout 内完成，此外 data 和 columnDefs 都需要在此之前清除。否则，它的更改可能不会变得可见，并且表内容和标题将保持不变（如 @maurycy 提到的 ui-grid 中的已知错误）