angle-ui-gridが100％の高さを持つangle-ui-layoutでネストされています

Question

angle-ui-layoutのコンテナ/ペインの1つにangle-ui-gridを表示しようとしています。コンテナの上部にツールバーがあり、残りのスペースにはflexgridとng-includeを使用して解決しようとしたグラフまたは対応するデータテーブルのいずれかを入力する必要があります。 私の問題は、最初に表示されたときにui-gridが正しく初期化されず、残りの領域が満たされないということです。また、ブラウザウィンドウのサイズを変更すると、ブラウザウィンドウのサイズが変更されることはありません。時にはそれに合わせて拡大されないこともあります。通常は縮んでいないことがあります。

私はhandleWindowResizeとui-grid-auto-resizeを使って無駄にしようとしました。

UIレイアウトはこれです：

<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グリッドが共にダミーチャート、f.e.と-含むNGであります

<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

再現するために：

• プレスのいずれかAnalysis1や解析2
• プレスショーテーブル
• は、ブラウザのサイズを変更します数回

今のところui-layoutスプリッターは無視してください。現時点では、ブラウザーウィンドウのサイズを変更し、UIグリッドに残りのスペースを一杯にすることだけに興味があります。

Answer 1

は、私はあなたが正しくをUI-グリッド自動サイズ変更のディレクティブを追加した参照が、あなたはまた、モジュールのモジュールの依存関係として指定する必要があります。

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

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