javascript - 使用 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 指定了“调整大小”的指令元素标识符。

加载时效果很好——所有 div 的大小都正确。但是，在更改窗口大小时，只会调整最后呈现的 div 的大小。我猜这是因为 resize window 事件每次都被每个 div 的范围依次覆盖，所以当页面加载时，window resize 事件只引用最后呈现的 div。

我该怎么做才能使调整大小事件应用于所有 div 而不仅仅是最后一个？

Answer 1

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

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