我的网站将有多个部分,我打算调整每个部分的大小。为了实现这一点,我制定了一个“可调整大小”指令,例如:
<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 的宽度(?)。我的问题是:
这是以角度制作可调整大小的 div 的“正确”方法吗?特别是,当一个 div 的大小影响另一个 div 时?
我个人认为(1)的答案是“不,我做得不正确,因为当每个指令都有一个隔离范围时,我无法在指令之间进行通信。”如果这是真的,我该如何解释 div 之间的窗口和可拖动大小调整?