height issue with AngularSlideables - angularjs

Question

I'm using AngularSlideables:
https://github.com/EricWVGG/AngularSlideables
I'm having a problem where the slider isn't working on chrome. If I manually set the height it works, but I have dynamic content so I can't set a fixed value.
Here's my code:
.directive('slideable', function () {
return {
restrict:'C',
compile: function (element, attr) {
// wrap tag
var contents = element.html();
/*
I need to get the height of the contents variable above so that I can set it within element.html, like so:
<div class="slideable_content" style="margin:0 !important; padding:0 !important; height: contents.height" >
*/
// var height = element.html().prop('offsetHeight');
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) ? '1s' : attrs.duration;
attrs.easing = (!attrs.easing) ? 'ease-in-out' : attrs.easing;
element.css({
'overflow': 'hidden',
'height': '0px',
// 'max-height' : '0';
//'height': '1500px',
// 'height': content.scrollHeight,
'transitionProperty': 'height',
'transitionDuration': attrs.duration,
'transitionTimingFunction': attrs.easing
});
};
}
};
})
Any ideas how I can get this working?

Answer 1

The issue with this is not the above code. There is another directive.
For some reason Chrome doesn't like doing this:
var content = target.querySelector('.slideable_content');
target.style.height = content.scrollHeight + 'px';
This worked instead:
var target = document.querySelector(attrs.slideToggle);
target.style.height = target.scrollHeight + 'px';