2017-08-22 41 views
3

我试图让我的网格响应,而不是移动,只是为了当用户调整窗口大小。 我正在使用ui网格自动调整大小,但它只调整宽度。高度不变。如何使ui网格响应AngularJS中的高度

我试图添加指令

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(); 
    }); 
} 
}]) 

和我的格子

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

我已经把一些调试器在我的代码,但它从来没有穿过。

+0

你想调整'UI-grid'高度酸当量屏幕垂直滚动或单元格高度? –

回答

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

只是调整