html - 如何使 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>

DEMO PLUNKR

只需调整屏幕大小