-
Notifications
You must be signed in to change notification settings - Fork 43
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Programmatically show/hide slideable content #18
Comments
I've been searching for a way to do this too, it would be great if I could toggle from within the controller etc |
Hi! I've created an attribute Html: <div class="slideable" sl-expanded-model="card.isExpanded"> Directive: .directive('slideable', function () {
return {
restrict: 'C',
// added new attribute to scope:
scope: {
slExpandedModel: '='
},
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) ? '1s' : 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
});
var target, content;
// added a watch to the new attribute and expanded/collapsed according to its value:
scope.$watch('slExpandedModel', function (expanded) {
if (angular.isUndefined(expanded)) {
expanded = false;
}
if (!target) target = element[0];
if (!content) content = target.querySelector('.slideable_content');
if (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';
}
}, true);
};
}
};
}) Now my The second directive ( |
This works great! Good job |
What is the best way to programmatically show/hide the slideable content from a controller/service?
I'd like to avoid something like
$('#toggle-slide').click()
The text was updated successfully, but these errors were encountered: