Skip to main content
 首页 » 编程设计

angularjs之Angular JS 可调整大小的 div 指令

2024年06月20日14artech

我的网站将有多个部分,我打算调整每个部分的大小。为了实现这一点,我制作了一个“可调整大小”指令,例如:

<div class="workspace" resize="full" ng-style="resizeStyle()"> 
<div class="leftcol" resize="left" ng-style="resizeStyle()"> 

使用如下指令:

lwpApp.directive('resize', function ($window) { 
    return { 
        scope: {}, 
 
        link: function (scope, element, attrs) { 
            scope.getWinDim = function () { 
                return { 
                    'height': window.height(), 
                    'width': window.width() 
                }; 
            }; 
 
            // Get window dimensions when they change and return new element dimensions 
            // based on attribute 
            scope.$watch(scope.getWinDim, function (newValue, oldValue) { 
                scope.resizeStyle = function () { 
                    switch (attrs.resize) { 
                    case 'full': 
                        return { 
                            'height': newValue.height, 
                            'width': (newValue.width - dashboardwidth) 
                        }; 
 
                    case 'left': 
                        return { 
                            'height': newValue.height, 
                            'width': (newValue.width - dashboardwidth - rightcolwidth) 
                        }; 
 
                    etc... 
                }; 
            }, true); 
 
            //apply size change on window resize 
            window.bind('resize', function () { 
                scope.$apply(scope.resizeStyle); 
            }); 
        } 
    }; 
}); 

如您所见,这只会在窗口大小调整时调整每个 div 的大小,并且每个指令都有一个隔离范围。这对于它的构建目的来说效果很好,但最终我想通过可拖动的栏来调整 div 的子集大小。例如

div1     div2 
---------------- 
|     ||       | 
|     ||       | 
|     ||       | 
|     ||       | 
---------------- 
    draggable bar in middle 

在可拖动栏的移动(水平方向)上,我需要通过父 Controller 的范围访问 div1、div2 的宽度(?)。我的问题是:

  1. 这是在 Angular 中制作可调整大小的 div 的“正确”方法吗?特别是,当一个 div 的大小影响另一个 div 时?

  2. 我个人认为 (1) 的答案是“不,我做得不正确,因为当每个指令都有隔离范围时,我无法在指令之间进行通信。”如果这是真的,我该如何解释 div 之间的窗口和可拖动大小调整?

请您参考如下方法:

这个问题很老了,但是对于任何寻找解决方案的人来说,我构建了一个简单的指令来处理这个问题,用于垂直和水平缩放器。

Take a look at the Plunker

angular.module('mc.resizer', []).directive('resizer', function($document) { 
 
    return function($scope, $element, $attrs) { 
 
        $element.on('mousedown', function(event) { 
            event.preventDefault(); 
 
            $document.on('mousemove', mousemove); 
            $document.on('mouseup', mouseup); 
        }); 
 
        function mousemove(event) { 
 
            if ($attrs.resizer == 'vertical') { 
                // Handle vertical resizer 
                var x = event.pageX; 
 
                if ($attrs.resizerMax && x > $attrs.resizerMax) { 
                    x = parseInt($attrs.resizerMax); 
                } 
 
                $element.css({ 
                    left: x + 'px' 
                }); 
 
                $($attrs.resizerLeft).css({ 
                    width: x + 'px' 
                }); 
                $($attrs.resizerRight).css({ 
                    left: (x + parseInt($attrs.resizerWidth)) + 'px' 
                }); 
 
            } else { 
                // Handle horizontal resizer 
                var y = window.innerHeight - event.pageY; 
 
                $element.css({ 
                    bottom: y + 'px' 
                }); 
 
                $($attrs.resizerTop).css({ 
                    bottom: (y + parseInt($attrs.resizerHeight)) + 'px' 
                }); 
                $($attrs.resizerBottom).css({ 
                    height: y + 'px' 
                }); 
            } 
        } 
 
        function mouseup() { 
            $document.unbind('mousemove', mousemove); 
            $document.unbind('mouseup', mouseup); 
        } 
    }; 
});