angular-ui-grid 在嵌套的 ui-views 中无法正确呈现

Posted 2023-03-06

【中文标题】angular-ui-grid 在嵌套的 ui-views 中无法正确呈现

【英文标题】：angular-ui-grid does not render properly inside nested ui-views

【发布时间】：2017-01-29 11:15:25

【问题描述】：

我正在使用带有 ui-grid 和 ui-view 的 AngularJS，试图创建一个带有选项卡式容器的页面。每个选项卡的内容（通常是 ui-grid）都显示在 ui-view 中：

<div class="tabbed-container">
    <uib-tabset>
        <uib-tab ng-repeat="t in tabs" select="go(t.route)" active="t.active">
            <uib-tab-heading>
                <i class="glyphicon glyphicon-t.icon"></i>
                t.heading
            </uib-tab-heading>
        </uib-tab>
    </uib-tabset>
    <div ui-view></div>
</div>

内容可能如下所示：

<div class="panel">
    <div ui-grid="gridOptions" ui-grid-infinite-scroll ui-grid-selection ui-grid-tree-view ui-grid-resize-columns class="grid"></div>
</div>

问题在于 ui-grid 没有垂直填充容器 - 它被设置为最小高度。所有与“面板”状态相关的 CSS 类都只有“高度：100%”，其他任何地方都没有设置高度。调试这种情况的尝试使我意识到，ui-view 被一个大小计算不正确的网格正确填充。选项卡式容器嵌套在其他 ui-view 中。有谁知道什么可能导致这种行为或者我可以尝试解决什么？

【问题讨论】：

对于我的网格，我总是有一个以像素为单位的固定高度。我不确定是否有可行的替代方案，但如果有，希望有人会发布它。

【参考方案1】：

问题是由于没有将正确的样式传递给 ui-view 的内容。解决方案是使用 flex，在容器上设置“flex:1”并将其传递给 ui-view。

.tabbed-container

    flex: 1;
    display: flex;
    flex-flow: column;

    /* Setting min-size is necessary to prevent weird flex behaviour on chrome and firefox */
    min-height: 100px;
    min-width: 100px;

   .tab-content
          
       flex:1;

   /* Setting min-size is necessary to prevent weird flex behaviour on chrome and firefox */
       min-height: 100px;
       min-width: 100px;
   

html:

<div class="tabbed-container">
    <uib-tabset>
        <uib-tab ng-repeat="t in tabs" select="go(t.route)" active="t.active">
            <uib-tab-heading>
                <i class="glyphicon glyphicon-t.icon"></i>
                t.heading
            </uib-tab-heading>
        </uib-tab>
    </uib-tabset>
<div class="tab-content" ui-view></div>