columnDefs標頭不時顯示

Question

我在UI上有一個非常隨機的問題。 看起來列定義不時顯示。 它在10次中有9次正常工作。

已經包含兩個gif動畫來顯示我的實際意思，因為這將有助於更快地理解問題。

下面的屏幕顯示列定義，一切都可見。

但是，第二張圖顯示標題列定義不可見

這個問題是一個完全隨機的問題，我不明白為什么會發生類似的事情。

在ui-grid問題的官方github存儲庫上有一個鏈接描述了我的類似情況： ui-grid類似的問題我試圖應用一些東西，但它不起作用，例如包裝html網頁

 <script type="text/ng-template"> 

我使用ng-include時標記，但它沒有幫助

如果您遇到類似問題或者您知道如何解決問題，請提供建議。

代碼片段：

<div class="modal-body" style="width: 100%; height: 100%;" ng-modal-drag>
  <div class="checkbox pull-right" style="margin-bottom: -40px; position: relative">
    <label class="text-primary">
      <input type="checkbox" ng-click="vm.updateHighlight()" ng-model="vm.companyMatch.isHighlighted" style="margin-top: 2px; outline: none;">Reviewed
    </label>
  </div>
  <div class="clearfix"></div>

  <uib-tabset>
    <uib-tab ng-repeat="tab in vm.tabs" active="tab.active" heading="{{tab.heading}}" select="tab.select()" ng-if="tab.heading != 'Map' || vm.companyCandidates.length > 0">
      <div ng-include="tab.content"></div>
    </uib-tab>
  </uib-tabset>
</div>

有趣的是，加載html內容並在第一個選項卡上ui-grid始終有效，並且當存在另一個ui-grid元素時，問題僅存在於第三個選項卡上

相關的javascript代碼如下所示：

vm.gridOptions = {
  paginationPageSizes: [5, 10, 25],
  paginationPageSize: 5,
  enableColumnResizing: true,
  enableRowSelection: true,
  enableRowHeaderSelection: false,
  multiSelect: false,

  columnDefs: [{
    field: 'businessName',
    displayName: 'Business name'
  }, {
    field: 'fullAddress',
    displayName: 'Address'
  }, ...],

  onRegisterApi: function(gridApi) {
    vm.gridApi = gridApi;
  }
};

Answer 1

在這個問題上花了一段合理的時間后，我終於找到了解決這個問題的方法。

這是ui-grid的文檔，當他們鼓勵使用特殊的javascript函數在模態窗口中打開它后正確渲染網格。

我在下面添加了代碼段：

$interval( function() {
    $scope.gridApi.core.handleWindowResize();
}, 500, 10);

那件事對我有用！