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?

非常感谢您的帮助!

4 Solutions collect form web for “Angular JSresize的div指令”

这个问题很古老,但是对于任何寻求解决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); } }; }); 

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

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

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

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

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

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

这并没有完全回答这个问题,而是改变了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的可拖动栏,但是当我这样做时会报告回来。

  • AngularJS:如何使用jqLit​​e查找?
  • 在Angularjs中的模块的“run”方法中注入依赖项
  • AngularJs:如何设置基于模型的单选button
  • $资源中删除和删除方法的区别?
  • 如何在域中托pipe一个angularjs应用程序
  • 如何在AngularJS控制器中获得当前范围的DOM元素?
  • 数据绑定的input是什么?
  • AngularJS - 任何方式为$ http.post发送请求参数,而不是JSON?
  • 如何根据布尔值在AngularJS中切换ng显示?
  • angularjs获得之前的路线path
  • 将父范围值传递给Angular中的ng-repeat循环