7
Я использую угловую аккордеонную директиву, чтобы скрыть/показать содержимое.Угловой Аккордеон, не увеличивающий высоту
Проблема, с которой я столкнулся, заключается в том, что высота контейнера контента не меняется.
Вот plunker: http://plnkr.co/edit/oWXrqoJpaYPDbe4TwT3c?p=preview
Если нажать на Show Более того, вы можете увидеть, как содержимое скрыто, а не высоту шоу-рабочих мест меняется.
JS:
app.directive('sliderContentDirective', function() {
return {
restrict:'A',
compile: function (element, attr) {
// wrap tag
var contents = element.html();
element.html('<div class="slideable_content" style="margin:0 !important; padding:0 !important" >' + contents + '</div>');
return function postLink(scope, element, attrs) {
// default properties
attrs.duration = (!attrs.duration) ? '0.7s' : attrs.duration;
attrs.easing = (!attrs.easing) ? 'ease-in-out' : attrs.easing;
element.css({
'overflow': 'hidden',
'height': '0px',
'transitionProperty': 'height',
'transitionDuration': attrs.duration,
'transitionTimingFunction': attrs.easing
});
};
}
};
});
app.directive('sliderToggleDirective', function($document, $timeout) {
return {
restrict: 'AE',
scope: {
target: "@"
},
link: function(scope, element, attrs) {
var timeoutFunc = function() {
var target = angular.element($document[0].querySelector("#" + scope.target))[0];
attrs.expanded = false;
element.bind('click', function() {
var content = target.querySelector('.slideable_content');
if(!attrs.expanded) {
content.style.border = '1px solid rgba(0,0,0,0)';
var y = content.clientHeight;
content.style.border = 0;
target.style.height = y + 'px';
}
else {
target.style.height = '0px';
}
attrs.expanded = !attrs.expanded;
});
}
$timeout(timeoutFunc, 0);
}
}
});
Если я проверить элемент шоу-рабочих мест, я могу видеть, что это имеет начальную высоту 312px. Если я удалю это, то он работает так, как ожидалось.
это можно решить с помощью css и Angular animations, если вы не полагались на css-логику, чтобы обернуть ваши строки после трех элементов. В противном случае ответ Кристины - лучшее решение, которое вы найдете. –