angularjs - 当 ng-grid 通过 ng-hide 将可见性从不可见更改为可见时，不会重新计算网格宽度

Question

我有一个带有 ng-hide 属性和 width:100% 样式的 ng-grid。

<div class="grid-style" data-ng-grid="gridOpt"
  style="display: inline-block; height: 300px; width: 100%;">
</div>

这个网格第一次是不可见的，当我在我的 HTML 表单中选择一些选项后变得可见。当这个网格变得可见时，它的宽度是错误的。

有什么方法可以强制更新 Grid 的布局吗？

Answer 1

我遇到过同样的问题。也许与这个问题有关。我创建了一个新指令作为解决方法：

myDirectives.directive('resizeWhen', function () {
    'use strict';
    return {
        restrict: 'A',
        scope: false,
        link: function (scope, elem, attrs, ctrl) {
            var resizeExpr = attrs.resizeWhen,
            listener = scope.$watch(resizeExpr, function (value) {
                if (value) {
                    elem.resize(); 
                    listener();
                }
            }, false);
        }
    };
});

您可以像下面这样使用它：

<div id="searchResultsGrid" ng-grid="searchResultsGrid" 
     resize-when="mode == 'search'">
</div>

请注意，您需要 jQuery 才能使上述指令起作用。

Answer 2

Try setting ng-if to only include the grid when there is data to show:

<div class="grid-style" data-ng-grid="gridOpt" data-ng-if="myViewModel.Data.length"
  style="display: inline-block; height: 300px; width: 100%;">
</div>

Source: https://github.com/angular-ui/ng-grid/issues/855