Angularjs调整大小叠加在div上的img-responsive

Question

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

我确实有一个带有重叠div元素的bootstrap img-responsive元素。如何通过绑定width和height属性来调整这些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();
                            }
                        };
                    }
                }
            }]);

但不知怎的，我无法更新元素的宽度

Answer 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%;
}