angular-ui-grid无法在嵌套的ui-views中正确渲染

Question

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

<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类仅声明“ height：100％”，未在其他任何地方设置高度。 尝试调试这种情况使我意识到，ui-view被正确计算尺寸的网格正确填充了。 选项卡式容器嵌套在其他ui视图中。 有谁知道可能导致这种行为的线索，或者我可以尝试解决该问题的线索吗？

Answer 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>