AngularJSの高さに合わせてui-gridを反応させる方法

Question

私はグリッドを反応させるようにしようとしています。 私はui-grid auto resizeを使用していますが、幅のサイズを変更するだけです。高さは変化しません。

私は私のコードでは、いくつかのデバッガを入れている

<div ui-grid="gridOptions" class="grid testTrans nopadding" ui-grid-selection ui-grid-auto-resize ui-grid-exporter ui-grid-move-columns ng-style="resizeWithOffset(pageOffSetY)" rezise> 
       <div class="well grid-loading" ng-show="grid.rows.length == 0"> 
        <i class="fa fa-spin fa-spinner"></i> 
        <strong>Data Loading...</strong> 
       </div> 

      </div> 

ディレクティブ

app.directive('resize', ['$window', function ($window) { 
return function (scope, element, attr) { 

    var w = angular.element($window); 
    scope.$watch(function() { 
     return { 
      'h': window.innerHeight, 
      'w': window.innerWidth 
     }; 
    }, function (newValue, oldValue) { 
     scope.windowHeight = newValue.h; 
     scope.windowWidth = newValue.w; 
     debugger; 
     scope.resizeWithOffset = function (offsetH) { 
      scope.$eval(attr.notifier); 
      return { 
       'height': (newValue.h - offsetH) + 'px' 
      }; 
     }; 

    }, true); 

    w.bind('resize', function() { 
     scope.$apply(); 
    }); 
} 
}]) 

と私のグリッドを追加しようとしましたが、それは通過することはありません。

Answer 1

何私のために働いたこともラッパーのサイズを変更します

<div layout="row" flex style="margin: 0;position: relative;" 
     ng-style="resizeWithOffset(323)" resize > 

            <div ui-grid="gridOptions" 
              class="wm-dashboard-grid" 
              style="position: absolute; 
                top: 0; 
                left: 0; 
                right: 0; 
                bottom: 0;" 
              ng-style="resizeWithOffset(325)" resize 
              ui-grid-auto-resize 
              ui-grid-pagination 
              ui-grid-selection 
              ui-grid-resize-columns> 
            </div> 

           </div> 

DEMO PLUNKR

だけ