我的网站将有多个部分，每个我打算可调整大小。为了做到这一点，我做了一个“可调整大小的”指令，例如：
<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)这是“正确”的方式去做在angluar的可调整大小的div？特别是，当一个div的大小影响另一个？
2)我个人觉得(1)的答案是“不，我不正确地做，因为我不能在指令之间沟通，当每个都有一个隔离范围。如果这是真的，我如何解释窗口和draggable调整div之间的大小？
非常感谢你有任何帮助！
这个问题是老的，但对于任何人寻找一个解决方案，我建立了一个简单的指令来处理这个，垂直和水平尺寸。
原文链接：https://www.f2er.com/angularjs/146165.htmlangular.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);
}
};
});
