Мой сайт будет иметь несколько разделов, каждый из которых я намерен изменить. Для этого я сделал "изменяемую по размеру" директиву, например:
<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 при изменении размера окна, и каждая директива имеет область выделения. Это отлично работает для того, для чего он создан, но в конечном итоге я хотел бы сделать подмножество divs, изменяемое по размеру, с помощью перетаскиваемого бара. Например,
div1 div2
----------------
| || |
| || |
| || |
| || |
----------------
draggable bar in middle
При перемещении перемещаемого бара (в горизонтальном направлении) мне нужно будет получить доступ к обоим div1, div2, предположительно, через область родительского контроллера (?). Мои вопросы:
-
Является ли это "правильным" способом сделать изменяемые размеры div в angular? В частности, когда размер одного div влияет на другой?
-
Мне лично кажется, что ответ на (1): "Нет, я не делаю это правильно, потому что я не могу общаться между директивами, когда у каждого есть область выделения". Если это так, как я могу учесть как изменение размера окна, так и перетаскивание между divs?