Chỉ thị div có thể thay đổi góc Angular

Question

Trang web của tôi sẽ có nhiều phần, mỗi phần trong đó tôi có thể định lại kích thước. Để thực hiện điều này tôi đã thực hiện một "thay đổi kích thước" chỉ thị, ví dụ:

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

Với một chỉ thị mà trông giống như sau:

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

Như bạn thấy, điều này chỉ thay đổi kích thước mỗi div trên cửa sổ thay đổi kích thước và mỗi chỉ thị có một phạm vi cách ly. Điều này làm việc tốt cho những gì nó được xây dựng cho, nhưng cuối cùng tôi muốn làm cho một tập hợp con của divs resizable thông qua một thanh kéo. Ví dụ

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

Trên phong trào thanh kéo của (theo chiều ngang), tôi sẽ cần phải truy cập vào cả hai div1, div2 của chiều rộng có lẽ qua phạm vi của một bộ điều khiển cha mẹ (?). Câu hỏi của tôi là:

1. Đây có phải là cách "đúng" để thực hiện các div có thể thay đổi trong góc không? Đặc biệt, khi kích thước của một div ảnh hưởng đến một div khác?

2. Cá nhân tôi cảm thấy câu trả lời cho (1) là "Không, tôi không làm đúng vì tôi không thể giao tiếp giữa các chỉ thị khi mỗi người có phạm vi cách ly." Nếu điều này là đúng, làm cách nào tôi có thể tính cả kích thước cửa sổ và có thể kéo giữa các div?

Answer 1

Câu hỏi này là cũ, nhưng đối với bất kỳ ai tìm kiếm giải pháp, tôi đã xây dựng một chỉ thị đơn giản để xử lý việc này, để thay đổi kích thước dọc và ngang.

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

Answer 2

Điều này không hoàn toàn trả lời câu hỏi, nhưng thay đổi scope: true giải quyết được vấn đề phạm vi cách ly. Đặc biệt, trong html của tôi, tôi có:

<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> 

và ng-repeat="file in files" vẫn có quyền truy cập đến các mảng $scope.files định nghĩa trong WorkspaceCtrl điều khiển. Vì vậy, scope: {} cắt bỏ phạm vi của chỉ thị từ phạm vi của bộ điều khiển chính, trong khi scope: true chỉ cần tạo một phạm vi mới cho từng trường hợp của chỉ thị VÀ mỗi cá thể của chỉ thị, cùng với các con của nó, giữ quyền truy cập vào phạm vi gốc.

Tôi chưa triển khai thanh có thể kéo để thay đổi kích thước các div này, nhưng sẽ báo cáo lại khi tôi làm như vậy.

Answer 3

Tôi biết tôi là một chút muộn để đảng, nhưng tôi thấy điều này và cần giải pháp của riêng tôi. Nếu bạn đang tìm kiếm một chỉ thị làm việc với flexbox, và không sử dụng jquery. Tôi ném một với nhau ở đây:

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

Chỉ cần tuyên bố đó hướng bạn muốn phần tử được thay đổi kích thước từ, và có hoặc không bạn đang sử dụng flexbox (mặc định là false).

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

Answer 4

Đối với nhu cầu của dự án của tôi thêm phần hỗ trợ các giá trị tối thiểu, do đó tấm có thể giữ một số chiều rộng hoặc chiều cao - (ở đây là các ý chính) - Github

Ngoài ra, tôi tạo Github repo, nơi tôi đã thêm hỗ trợ cho các bảng nằm ngay trục chính của trang và hỗ trợ các giá trị tối thiểu/tối đa. Đó là giai đoạn ví dụ bây giờ, nhưng tôi sẵn sàng biến nó thành chỉ thị Góc đầy đủ trọng lượng