使用AngularJS调整窗口大小的div大小

Question

我正在尝试使用指令来调整我页面上的几个 div 的大小（准确地说是 5 个）。它们都是我想调整大小的列，因此它们总是延伸到窗口底部。

我以此为指导：Window resize directive

想出这个：

app.directive('resize', ['$window', function($window) {
    return {
        link: function(scope, elem, attrs) {
            scope.onResize = function() {
                var padding = 30,
                    offset = elem.prop('offsetTop'),
                    height = $window.innerHeight - offset - padding;

                elem.css({height: height + 'px'});
            }
            scope.onResize();

            angular.element($window).bind('resize', function() {
                scope.onResize();
            })
        }
    }
}]);

我已经为我的 div 指定了“resize”的指令元素标识符。

加载时效果很好 - 所有 div 的大小都正确。但是，在更改窗口大小时，只有最后渲染的 div 会调整大小。我猜这是因为每次都在每个 div 的范围内依次覆盖 resize window 事件，因此在加载页面时，window resize 事件仅指最后渲染的 div。

我将如何处理，以便调整大小事件适用于所有 div 而不仅仅是最后一个？

Answer 1

在研究一个完全不相关的问题时，我意识到我只需要设置范围：

app.directive('resize', ['$window', function($window) {
    return {
        scope: {},
        link: function(scope, elem, attrs) {
            ....
        }
    }
}]);