【问题标题】：Angularjs resizing overlayed on div's on img-responsiveAngularjs在img-responsive上调整div上的覆盖
【发布时间】：2015-06-04 10:26:17
【问题描述】：

http://plnkr.co/edit/mQb85ejjxzHOL5Vkv4Ua?p=preview

我确实有一个带有重叠 div 元素的引导 img 响应元素。如何通过绑定宽度和高度属性来调整这些 div 的大小。我不想使用 jquery，以正确的角度方式进行操作。

我已经尝试过这个指令

            App.directive('onSizeChanged', ['$window', function ($window) {
                return {
                    restrict: 'A',
                    scope: {
                        onSizeChanged: '&'
                    },
                    link: function (scope, $element, attr) {
                        var element = $element[0];

                        cacheElementSize(scope, element);
                        $window.addEventListener('resize', onWindowResize);

                        function cacheElementSize(scope, element) {
                            scope.cachedElementWidth = element.offsetWidth;
                            scope.cachedElementHeight = element.offsetHeight;
                        }

                        function onWindowResize() {
                            var isSizeChanged = scope.cachedElementWidth != element.offsetWidth || scope.cachedElementHeight != element.offsetHeight;
                            if (isSizeChanged) {
                                var expression = scope.onSizeChanged();
                                expression();
                            }
                        };
                    }
                }
            }]);

但不知何故我无法更新元素的宽度

【问题讨论】：

标签： angularjs resize angular-directive

【解决方案1】：

我不想在您尝试制定该指令后让您失望，但实际做到这一点的最佳方法是使用 CSS：

Updated Plunker

只需将叠加层更改为使用百分比，它们将始终自动保持正确的比例和位置：

#overlay1{
    position: absolute;
    background-color: blue;  
    top: 5%;
    left: 5%;
    right: 65%;
    bottom: 65%;
}
#overlay2{
    position: absolute;
    background-color: red;  
    top: 35%;
    left: 35%;
    right: 35%;
    bottom: 35%;
}
#overlay3{
    position: absolute;
    background-color: green;  
    top: 65%;
    left: 65%;
    right: 5%;
    bottom: 5%;
}

【讨论】：