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

前端之家收集整理的这篇文章主要介绍了angularjs – Angular JS可调整大小的div指令前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的网站将有多个部分,每个我打算可调整大小。为了做到这一点,我做了一个“可调整大小的”指令,例如:
<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);
        }
    };
});
原文链接:https://www.f2er.com/angularjs/146165.html

猜你在找的Angularjs相关文章