Question

我试图在angular-ui-layout的一个容器/窗格中显示一个angular-ui-grid。容器应该在顶部包含一个工具栏，剩下的空间应该由图表或相应的数据表填充，我试图用flexgrid和ng-include解决。我的问题是，我没有在首次显示时正确初始化ui-grid并且它没有填充剩余的空间。当我调整浏览器窗口大小时，它也无法可靠地调整大小，有时它不会相应增长，有时候它不会缩小，通常是未对齐的滚动条。

我尝试使用handleWindowResize和ui-grid-auto-resize无济于事。

ui-layout是这样的：

<div ui-layout="{flow : 'column'}"  >
    <div ui-layout-container size="20%"> 
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>

    <div ui-layout-container>

      <div style="height:100%;display:flex;flex-flow:column;padding:10px">

        <form role="form" style="padding-bottom:10px">
          <label>Toolbar</label>
          <button ng-click="showAnalysis1=true">Analysis 1</button>
          <button ng-click="showAnalysis1=false">Analysis 2</button>
        </form>

        <form role="form" style="padding-bottom:10px">
          <label>Sub-Toolbar</label>
          <button ng-click="showChart=true">Show chart</button>
          <button ng-click="setShowChart(false)">Show table</button>
        </form>

        <div class="analysis-container" ng-show="showAnalysis1" ng-include="'analysis1.html'">
        </div>

        <div class="analysis-container" ng-show="!showAnalysis1" ng-include="'analysis2.html'">
        </div>

      </div>

    </div>
 </div>

ui-grid与虚拟图表一起包含在ng-include中，等等。

<div ng-show="showChart">
  Here goes the chart for analysis 1...
</div>

<div ng-show="!showChart" class="my-grid-container">
  <div  ui-grid="tableOptions" class="my-grid" ui-grid-auto-resize>
  </div>  
</div>

以下plnkr在上下文中显示了这一点：

http://plnkr.co/edit/gIynXCdy7Kkyl0iwiBid?p=preview

重现：

按分析1或分析2
按显示表
多次调整浏览器窗口的大小

现在请忽略ui-layout拆分器。目前我只对调整浏览器窗口大小并让ui-grid填满剩余空间感兴趣。

Answer 1

我看到您已正确添加指令 ui-grid-auto-resize ，但您还必须将其指定为模块的模块依赖项：

angular.module('x', ['ui.layout', 'ui.grid','ui.grid.autoResize'])

http://plnkr.co/edit/8VmwsvBGnbtZNsjDL95C?p=preview

角度ui网格嵌套在角度ui布局中，高度为100％

1 个答案: