각도 JS 크기 조정 가능한 div 지시어
사이트에는 여러 섹션이 있으며, 각 섹션은 크기를 조정할 수 있습니다.이를 달성하기 위해 다음과 같은 "크기 조정 가능한" 지시를 내렸습니다.
<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 사이의 창과 드래그 가능 크기 조정을 모두 고려하려면 어떻게 해야 합니까?
이 질문은 오래되었지만 해결책을 찾고 있는 사람들을 위해 수직 및 수평 리사이저에 대한 간단한 지침을 만들었습니다.
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);
}
};
});
파티에 조금 늦은 건 알지만, 이걸 발견했고 나만의 해결책이 필요했어요.jquery를 사용하지 않고 flexbox와 연동되는 디렉티브를 찾고 있는 경우.여기다가 하나 던져놨어요.
http://codepen.io/Reklino/full/raRaXq/
요소의 크기를 조정할 수 있는 방향과 Flexbox(기본값은 false)를 사용할지 여부를 선언하기만 하면 됩니다.
<section resizable r-directions="['right', 'bottom']" r-flex="true">
프로젝트의 요구에 따라 패널이 폭 또는 높이를 일정하게 유지할 수 있도록 최소값 지원을 추가했습니다.- Github
또한 Github repo를 작성하여 패널이 메인 페이지 축 오른쪽에 위치하도록 지원하고 최소/최대값을 지원합니다.지금은 예시 단계이지만, 나는 그것을 풀 웨이트 Angle 지시로 바꿀 용의가 있다.
이것이 질문에 완전히 답하는 것은 아니지만,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"
는 아직 할 수 .$scope.files
[ Workspace Ctrl ] : ★★★★★★★★★★★★★★★★★.scope: {}
만,scope: true
는 디렉티브의 각 인스턴스에 대해 새로운 범위를 작성하기만 하면 디렉티브의 각 인스턴스와 그 하위 인스턴스는 상위 범위에 대한 액세스를 유지합니다.
이러한 div의 크기를 조정하는 드래그 가능 바는 아직 구현하지 않았지만, 구현하면 다시 보고하겠습니다.
언급URL : https://stackoverflow.com/questions/18368485/angular-js-resizable-div-directive
'source' 카테고리의 다른 글
Wordpress : 태그의 투고 수를 카운트하는 방법 (0) | 2023.03.08 |
---|---|
가시성이 AngularJs에 숨겨져 있습니까? (0) | 2023.02.26 |
Play 2.x: 공통 버튼을 사용하여 AJAX 요청을 만드는 방법 (0) | 2023.02.26 |
스프링 MVC @PathVariable with 닷(.)이 잘려나가고 있습니다. (0) | 2023.02.26 |
CORS 문제가 있는 Axios (0) | 2023.02.26 |