Question

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

<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的宽度，大概是通过父控制器（？）的范围。我的问题是：

这是以“角度”制作可调整大小的div的“正确”方法吗？特别是，当一个div的大小影响另一个？
我个人觉得（1）的答案是“不，我没有正确地做到这一点，因为当每个指令都有隔离范围时，我无法在指令之间进行通信。”如果这是真的，我如何考虑div之间的窗口和可拖动的大小调整？

Answer 1

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

Take a look at the Plunker

enter image description here

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

Answer 2

我知道我参加派对有点晚了，但我找到了这个并且需要我自己的解决方案。如果您正在寻找适用于flexbox的指令，并且不使用jquery。我在这里扔了一个：

http://codepen.io/Reklino/full/raRaXq/

只需声明您希望元素可以调整的方向，以及您是否使用flexbox（默认为false）。

<section resizable r-directions="['right', 'bottom']" r-flex="true">

Answer 3

For the needs of my project i added support of minimum values, so that panels can keep some width or height - (here is the gist) - Github

Also, i created Github repo, where i added support for panels being located right of main page axis and support of minimum/maximum values. It's in example stage now, but i'm willing to turn it into a full-weight Angular directive

Answer 4

这并没有完全回答这个问题，但更改scope: true解决了隔离范围问题。特别是在我的html中我有：

<div ng-controller="WorkspaceCtrl">
  <div class="workspace" resize="full" ng-style="resizeStyle()">
    <div class="leftcol" resize="left" ng-style="resizeStyle()">
      <ul class="filelist">
        <li ng-repeat="file in files" id={{file.id}} ng-bind=file.name></li>
      </ul>
      <div contenteditable="true" ng-model="content" resize="editor" ng-style="resizeStyle()">
        Talk to me
      </div>
    </div>
</div>

和ng-repeat="file in files"仍然可以访问控制器WorkspaceCtrl中定义的数组$scope.files。因此scope: {}会从父控制器的范围中切断指令的范围，而scope: true只是为指令的每个实例和指令的每个实例及其子节点创建一个新的范围，保留对父作用域的访问权限。

我还没有实现可调整的栏来调整这些div的大小，但会在我这样做时报告。

Angular JS可调整大小的div指令

4 个答案: