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

发布时间：2020-12-17 08:50:28 所属栏目：安全来源：网络整理

导读：我的网站将有多个部分，每个我打算可调整大

我的网站将有多个部分，每个我打算可调整大小。为了做到这一点，我做了一个“可调整大小的”指令，例如：

<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

在可拖动条的移动(在水平方向)，我需要访问div1，div2的宽度大概通过父控制器(？)的范围。我的问题是：

1)这是“正确”的方式去做在angluar的可调整大小的div？特别是，当一个div的大小影响另一个？

2)我个人觉得(1)的答案是“不，我不正确地做，因为我不能在指令之间沟通，当每个都有一个隔离范围。如果这是真的，我如何解释窗口和draggable调整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);
        }
    };
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!