Angular JS resizable directivo div

Mi sitio tendrá múltiples secciones, cada una de las cuales pretendo cambiar su tamaño. Para lograr esto, he hecho una directiva de “cambio de tamaño”, por ejemplo:

Con una directiva que se parece a algo así:

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

Como puede ver, esto solo cambia el tamaño de cada div en el tamaño de ventana, y cada directiva tiene un scope aislado. Esto funciona bien para lo que está diseñado, pero en última instancia me gustaría hacer que un subconjunto de los div se pueda cambiar de tamaño a través de una barra que se puede arrastrar. Por ejemplo

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

En el movimiento de la barra arrastrable (en la dirección horizontal), necesitaría acceder al ancho de div1, div2 presumiblemente a través del scope de un controlador principal (?). Mis preguntas son:

  1. ¿Es esta la forma “correcta” de hacer divisiones de tamaño variable en angular? En particular, cuando el tamaño de un div afecta a otro?

  2. Personalmente, siento que la respuesta a (1) es “No, no lo estoy haciendo correctamente porque no puedo comunicarme entre directivas cuando cada una tiene un scope aislado”. Si esto es cierto, ¿cómo puedo tener en cuenta tanto la ventana como el cambio de tamaño arrastrable entre los divs?

Esta pregunta es antigua, pero para cualquiera que busque una solución, construí una directiva simple para manejar esto, para los resistores verticales y horizontales.

Echa un vistazo a 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); } }; }); 

Sé que llegué un poco tarde a la fiesta, pero encontré esto y necesitaba mi propia solución. Si está buscando una directiva que funcione con flexbox, y no use jquery. Yo arrojé uno aquí:

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

Simplemente declare de qué direcciones quiere que se pueda cambiar el tamaño del elemento, y si está utilizando flexbox (por defecto es falso).

 

Para las necesidades de mi proyecto agregué soporte de valores mínimos, para que los paneles puedan mantener algo de ancho o alto – (aquí está la esencia) – Github

Además, creé Repo de Github , donde agregué soporte para los paneles ubicados a la derecha del eje de la página principal y soporte de valores mínimos / máximos. Está en etapa de ejemplo ahora, pero estoy dispuesto a convertirlo en una directiva angular de peso completo

Esto no responde completamente a la pregunta, sino que cambia el scope: true resolvió el problema de scope aislado. En particular, en mi html tengo:

 
Talk to me

y ng-repeat="file in files" todavía tiene acceso a la matriz $scope.files definida en el controlador WorkspaceCtrl. Entonces el scope: {} corta el scope de la directiva del scope del controlador principal, mientras que scope: true simplemente crea un nuevo scope para cada instancia de la directiva Y cada instancia de la directiva, junto con sus hijos, retiene el acceso a el scope principal

Todavía no he implementado la barra arrastrable que cambia el tamaño de estos divs, pero reportaré cuando lo haga.