Angular JSresize的div指令

我的网站将有多个部分，我打算可以resize。 为了做到这一点，我做了一个“可resize”的指令，例如：

<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）这是否是一个“正确”的方式去做可变的divs angluar？ 特别是，当一个div的大小影响另一个？

2）我个人觉得（1）的答案是“不，我没有正确地做，因为当每个指令都有隔离范围时，我不能在指令之间进行通信”。 如果这是真的，我怎样才能解决窗口和divs之间的可拖动resize？

非常感谢您的帮助！

Answer 1

这个问题很古老，但是对于任何寻求解决scheme的人来说，我build立了一个简单的指令来处理这个问题，对于垂直和水平调整器。

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

我知道我晚了一点，但我find了这个，需要我自己的解决scheme。 如果你正在寻找一个适用于flexbox的指令，而不使用jQuery。 我一起扔在这里：

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

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

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

Answer 3

为了我的项目的需要，我添加了最小值的支持，以便面板可以保持一些宽度或高度 – （这里是要点） – Github

另外，我创build了Github repo ，在这里我添加了对主页面轴右侧的面板的支持以及对最小/最大值的支持。 现在正处于示例阶段，但我愿意把它变成一个完整的Angular指令

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只是为指令的每个实例创build一个新的范围，并且指令的每个实例及其子节点都保留对父范围。

我还没有实现调整这些div的可拖动栏，但是当我这样做时会报告回来。