Programmatically show/hide slideable content

[jesseflorig]

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()

[elewin]

I've been searching for a way to do this too, it would be great if I could toggle from within the controller etc

[ricfwolff]

Hi! I've made some changes that allow that behavior. But, as I'm new to AngularJS, I don't know if that is correct.

I've created an attribute sl-expanded-model to bind a watch to a bool.

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 div expands and collapses when I change card.isExpanded from the controller.

The second directive (slideToggle) became useless in my case. The div itself knows if it should slide or not. I don't know if that's ok, specially regarding performance. But maybe it can help someone.

[elewin]

This works great! Good job