如何使 ui-grid 响应 AngularJS 中的高度

Question

我正在尝试使我的网格响应，而不是用于移动设备，只是在用户调整窗口大小时。 我正在使用 ui-grid 自动调整大小，但它只调整宽度。高度不变。

我尝试添加指令

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>

我已经在我的代码中放置了一些调试器，但它从未通过。

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>

演示普伦克

尔只需调整屏幕大小