각도 JS 크기 조정 가능한 div 지시어

각도 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. 크기가 조정 가능한 div를 각도로 만드는 것이 "올바른" 방법입니까?특히, 한 div의 크기가 다른 div에 영향을 미칠 때?

2. 개인적으로는 (1)에 대한 답은 각각 격리된 스코프를 가지고 있을 때는 디렉티브 간에 통신할 수 없기 때문에 올바르게 하고 있지 않다고 생각합니다.이것이 사실일 경우, div 사이의 창과 드래그 가능 크기 조정을 모두 고려하려면 어떻게 해야 합니까?

이 질문은 오래되었지만 해결책을 찾고 있는 사람들을 위해 수직 및 수평 리사이저에 대한 간단한 지침을 만들었습니다.

플런커를 보세요.

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

파티에 조금 늦은 건 알지만, 이걸 발견했고 나만의 해결책이 필요했어요.jquery를 사용하지 않고 flexbox와 연동되는 디렉티브를 찾고 있는 경우.여기다가 하나 던져놨어요.

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

요소의 크기를 조정할 수 있는 방향과 Flexbox(기본값은 false)를 사용할지 여부를 선언하기만 하면 됩니다.

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

프로젝트의 요구에 따라 패널이 폭 또는 높이를 일정하게 유지할 수 있도록 최소값 지원을 추가했습니다.- Github

또한 Github repo를 작성하여 패널이 메인 페이지 축 오른쪽에 위치하도록 지원하고 최소/최대값을 지원합니다.지금은 예시 단계이지만, 나는 그것을 풀 웨이트 Angle 지시로 바꿀 용의가 있다.

이것이 질문에 완전히 답하는 것은 아니지만,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"는 아직 할 수 .$scope.files[ Workspace Ctrl ] : ★★★★★★★★★★★★★★★★★.scope: {}만,scope: true는 디렉티브의 각 인스턴스에 대해 새로운 범위를 작성하기만 하면 디렉티브의 각 인스턴스와 그 하위 인스턴스는 상위 범위에 대한 액세스를 유지합니다.

이러한 div의 크기를 조정하는 드래그 가능 바는 아직 구현하지 않았지만, 구현하면 다시 보고하겠습니다.

언급URL : https://stackoverflow.com/questions/18368485/angular-js-resizable-div-directive