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 表单中选择某个选项后，它就变得可见。 当这个网格变得可见时，它的宽度是错误的。

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

Answer 1

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

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 才能使上述指令发挥作用。