3

我在 UI 上有一个非常随机的问题。看起来列定义不时显示。它在 10 次中有 9 次都可以正常工作。

包含两个 gif 动画以显示我的实际意思，因为这将有助于更快地理解问题。

下面的屏幕显示了列定义，一切都是可见的。

这是工作标题，我们可以在最后一个选项卡上看到它

但是，第二张图片显示标题列定义不可见

这是不显示列定义的标题

这个问题是一个完全随机的问题，我不明白为什么会发生这样的事情。

官方github存储库上有一个关于ui-grid问题的链接，它描述了我遇到的类似情况：ui-grid 类似问题 我尝试应用一些东西，但它不起作用，例如用

 <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;
  }
};
4

1 回答 1

1

在该问题上花费了合理的时间后，我终于找到了该问题的解决方案。

这是ui-grid的文档，当他们鼓励在模式窗口中打开网格后使用特殊的 javascript 函数正确呈现网格时。

我在下面添加了代码片段：

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

那东西对我有用！

于 2016-09-14T10:10:00.307 回答