7
Sto usando una direttiva di fisarmonica angolare per nascondere/mostrare il contenuto.La fisarmonica angolare non espande l'altezza
Il problema che sto affrontando è che l'altezza del contenitore del contenuto non cambia.
Ecco un plunker: http://plnkr.co/edit/oWXrqoJpaYPDbe4TwT3c?p=preview
Se si fa clic su Visualizza più, si può vedere come il contenuto è nascosto piuttosto che l'altezza della show-cambiare lavoro.
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);
}
}
});
Se i ispezionare l'elemento di mostra di posti di lavoro, posso vederlo ha un'altezza iniziale di 312px. Se rimuovo questo, allora funziona come previsto.
questo potrebbe essere risolto con css e animazioni angolari se non si è basata sulla logica css per avvolgere le righe dopo 3 elementi. Altrimenti, la risposta di Christina è la migliore soluzione che troverai. –