角JS可调整大小的d​​iv指令 [英] Angular JS resizable div directive

问题描述

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

My site will have multiple sections, each of which I intend to be resizable. To accomplish this I've made a "resizable" directive, e.g.:

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

通过一项指令，看起来是这样的：

With a directive that looks something like:

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，每个指令具有分离的范围。这工作得很好什么它的建成为，但最终我想提出通过拖动条可调整大小的d​​iv的一个子集。例如

As you can see, this only resizes each div on window resize, and each directive has an isolate scope. This works fine for what it's built for, but ultimately I would like to make a subset of the divs resizable via a draggable bar. For instance

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

在可拖动条的移动（在水平方向），我需要访问这两个DIV1，通过父控制器的范围DIV2的宽度presumably（？）。我的问题是：

On the the draggable bar's movement (in the horizontal direction), I would need to access both div1, div2's width presumably via the scope of a parent controller(?). My questions are:

1），这是正确的方式去在angluar使得可调整大小的d​​iv？特别是，当一个分区的大小会影响另一

1) Is this the "correct" way to go about making resizable divs in angluar? In particular, when the size of one div affects another?

2）我个人觉得像答案（1）不，我没有做正确，因为我不能指令之间通信时，每个人都有一个分离的范围。如果这是真的，我怎么能解释的div之间了窗口和调整大小拖动？

2) I personally feel like the answer to (1) is "No, I am not doing it correctly because I cannot communicate between directives when each has an isolate scope." If this is true, how can I account for both window and draggable resizing between divs?

非常感谢您有任何帮助！

Thanks so much for any help you have have!

推荐答案

这个问题是老了，但任何人寻找一个解决方案，我建立了一个简单的指令来处理这个问题，垂直和水平的调节大小。

This question is old, but for anybody looking for a solution, I built a simple directive to handle this, for vertical and horizontal resizers.

看看在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);
        }
    };
});

这篇关于角JS可调整大小的d​​iv指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！