Angular JS 可调整大小的 div 指令 [英] Angular JS resizable div directive
问题描述
我的网站将有多个部分，我打算调整每个部分的大小.为了实现这一点，我制定了一个可调整大小"的指令，例如:
<div class="leftcol" resize="left" ng-style="resizeStyle()">使用如下所示的指令:
lwpApp.directive('resize', function ($window) {返回 {范围: {}，链接:函数(范围、元素、属性){scope.getWinDim = 函数 () {返回 {'高度':window.height(),'宽度':window.width()};};//当窗口尺寸改变时获取窗口尺寸并返回新的元素尺寸//基于属性scope.$watch(scope.getWinDim, function (newValue, oldValue) {scope.resizeStyle = 函数 () {开关(attrs.resize){案例满":返回 {'高度':newValue.height，宽度":(newValue.width - 仪表板宽度)};案例左":返回 {'高度':newValue.height，'width': (newValue.width - 仪表板宽度 - rightcolwidth)};等等...};}， 真的);//在窗口调整大小时应用大小更改window.bind('resize', function () {scope.$apply(scope.resizeStyle);});}};});
如您所见，这仅在调整窗口大小时调整每个 div 的大小，并且每个指令都有一个隔离范围.这适用于它的构建目的，但最终我想通过可拖动条调整 div 的子集.例如
div1 div2----------------||||||||||||||||----------------中间的可拖动栏
在可拖动条的移动(水平方向)上，我可能需要通过父控制器(?)的范围访问 div1 和 div2 的宽度.我的问题是:
这是在 angular 中制作可调整大小的 div 的正确"方法吗?特别是，当一个 div 的大小影响另一个时?
我个人觉得 (1) 的答案是不，我没有正确做，因为当每个指令都有一个隔离范围时，我无法在指令之间进行通信."如果这是真的，我该如何考虑窗口和 div 之间的可拖动调整大小?
解决方案 这个问题很老了，但对于任何寻找解决方案的人，我构建了一个简单的指令来处理这个问题，用于垂直和水平调整器.
angular.module('mc.resizer', []).directive('resizer', function($document) {返回函数($scope，$element，$attrs){$element.on('mousedown', function(event) {event.preventDefault();$document.on('mousemove', mousemove);$document.on('mouseup', mouseup);});功能鼠标移动(事件){如果($attrs.resizer == '垂直'){//处理垂直缩放器var x = event.pageX;如果 ($attrs.resizerMax && x > $attrs.resizerMax) {x = parseInt($attrs.resizerMax);}$element.css({左:x + 'px'});$($attrs.resizerLeft).css({宽度:x + 'px'});$($attrs.resizerRight).css({左:(x + parseInt($attrs.resizerWidth)) + 'px'});} 别的 {//处理水平调整器var y = window.innerHeight - event.pageY;$element.css({底部:y + 'px'});$($attrs.resizerTop).css({底部: (y + parseInt($attrs.resizerHeight)) + 'px'});$($attrs.resizerBottom).css({高度:y + 'px'});}}功能鼠标向上(){$document.unbind('mousemove', mousemove);$document.unbind('mouseup', mouseup);}};});
My site will have multiple sections, each of which I intend to be resizable. To accomplish this I've made a "resizable" directive, e.g.:
<div class="workspace" resize="full" ng-style="resizeStyle()">
<div class="leftcol" resize="left" ng-style="resizeStyle()">
With a directive that looks something like:
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);
});
}
};
});
As you can see, this only resizes each div on window resize, and each directive has an isolate scope. This works fine for what it's built for, but ultimately I would like to make a subset of the divs resizable via a draggable bar. For instance
div1 div2
----------------
| || |
| || |
| || |
| || |
----------------
draggable bar in middle
On the the draggable bar's movement (in the horizontal direction), I would need to access both div1, div2's width presumably via the scope of a parent controller(?). My questions are:
Is this the "correct" way to go about making resizable divs in angular? In particular, when the size of one div affects another?
I personally feel like the answer to (1) is "No, I am not doing it correctly because I cannot communicate between directives when each has an isolate scope." If this is true, how can I account for both window and draggable resizing between divs?
解决方案 This question is old, but for anybody looking for a solution, I built a simple directive to handle this, for vertical and horizontal resizers.
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);
}
};
});
这篇关于Angular JS 可调整大小的 div 指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
