创建 window 调整大小的指令

Question

我有四个 大部分 方形的图表，我需要在 window 调整大小时调整它们的大小。我在顶部的 angular 控制器中创建了如下指令。这似乎不起作用，因为该指令似乎在页面加载后立即执行，并且在调整大小时似乎没有任何反应。我在这里错过了什么？

targetApp.directive('rsz', function ($window) {
    return function (scope, element) {
        var w = angular.element($window), 
            iw = w.innerWidth,
            ih = w.innerHeight;

        //resizing relative to the this parent container 
        scatterParentDimensions = getoffsetDimensions('#scatter-container'),
        expectedWidth, expectedHeight;

        console.log('rel w:', scatterParentDimensions.width, 'rel h:', scatterParentDimensions.height);

        if (iw > ih) {
            expectedWidth = scatterParentDimensions.width / 2;
            expectedHeight = (scatterParentDimensions.height < iw)
                ? scatterParentDimensions.height / 2
                : scatterParentDimensions.height / 4;
        }
        else {
            expectedWidth = iw / 2;
            expectedHeight = ih - 50;
        }

        // this is returning NaN as soon as the page is loaded.
        console.log('set w:', expectedWidth, 'set h:', expectedHeight);

        var selector = "#" + element.id;
        if ($(selector).highcharts()) {
            chart = $(selector).highcharts();
            chart.setSize(expectedWidth, expectedHeight, false);
        }

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

我已经在需要调整大小的四个图表上添加了指令 rsz。

//scatter.html
<div id="target-charts">
    <div id="scatter-container" class="col-sm-8">
        <div class="row">
            <div class="col-sm-6">
                <div class="scatter-chart">
                    <div class="chart-body" rsz id="scatterA"></div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="scatter-chart">
                    <div class="chart-body" rsz id="scatterB"></div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="scatter-chart">
                    <div class="chart-body" rsz id="scatterC"></div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="scatter-chart">
                    <div class="chart-body" rsz id="scatterD"></div>
                </div>
            </div>
        </div>
    </div>
</div>

getOffsetDimensions 的定义

function getoffsetDimensions(selector) {
    var el = document.querySelector(selector);
    return {
        width: el.offsetWidth,
        height: el.offsetHeight
    }
}

Answer 1

在你的指令中，你监听了 resize 事件但没有做任何事情（scope.$apply 在这里基本上什么都不做）。

您可以在事件处理程序中实际调整大小，例如

myapp.directive('resize1', function($window) {
return function(scope, element, attr) {
    var w = angular.element($window);
    w.on('resize', function() {
        var hh = document.getElementById('header').offsetHeight;
        var fh = document.getElementById('footer').offsetHeight;
        console.log('hh & fh', hh, fh);                    

        var tp = hh + 2;
        var bt = fh + 2;
        console.log('tp & bt', tp, bt);                

        var changes = {
            bottom: bt + 'px',
            top: tp + 'px',
        }
        element.css(changes);
        scope.$apply();
    });
};
});

或者观察尺寸变化，例如

app.directive('resize', function ($window) {
return function (scope, element) {
    var w = angular.element($window);
    scope.getWindowDimensions = function () {
        return {
            'h': w.height(),
            'w': w.width()
        };
    };
    scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {
        scope.windowHeight = newValue.h;
        scope.windowWidth = newValue.w;

        scope.style = function () {
            return {
                'height': (newValue.h - 100) + 'px',
                    'width': (newValue.w - 100) + 'px'
            };
        };

    }, true);

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

Answer 2

最终这就是我完成这项工作的方式。它仍然不是完美的解决方案，也不是通用的，但我在我寻找的初始阶段得到了它。

targetApp.directive('resize', 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) {
            var ew, eh, scatterParentDimensions = getoffsetDimensions('#scatter-container');

            if (newValue.w > newValue.h) {
                ew = scatterParentDimensions.width / 2;
                eh = (scatterParentDimensions.height < newValue.w)
                ? scatterParentDimensions.height / 2
                : scatterParentDimensions.height / 4;
            }
            else {
                ew = newValue.w / 2;
                eh = newValue.h - 50;
            }

            //resize highcharts
            var selector = '#' + element[0].id;
            var chart = angular.element(selector).highcharts();
            chart.setSize(ew, eh, false);
        }, true);

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

创建 window 调整大小的指令

Creating a directive for window resizing

highcharts

window-resize

angularjs