Question

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

提出这个：

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指令元素标识符＆＃34; resize＆＃34;。

在加载时，它工作得很好 - 所有div都是正确的大小。但是，在更改窗口大小时，仅调整最后渲染的div的大小。我猜它是因为resize窗口事件每次都被覆盖每个div的范围，所以在页面加载时，窗口调整大小事件只引用最后一次渲染格。

我如何处理它，以便resize事件适用于所有div而不仅仅是最后一个？

Answer 1

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

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

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

1 个答案: