ng-show on basis of Angular directive?

Question

I'm using the AngularSlideables to smoothly expand and collapse an area where people can find more details with the following code ( Fiddle here ):

<h3 slide-toggle="#details" >More details</h3>
<div id="details" class="slideable">
    <p>Bespoke aesthetic Bushwick craft beer. Qui aesthetic butcher, cardigan ex scenester Neutra American Apparel mumblecore.</p>
</div>

This works fine, but when the details area is expanded I want More details to be changed to Less details (and a minus-icon) so that it is clear that you can click again to change back.

Normally I would do something like this using an ng-show="some expression" , but I don't see what kind of expression I can use here to know whether it is expanded or not.

Does anybody know how I can change the Mode details to Less details with this AngularSlideables-directive? All tips are welcome!

Answer 1

you can do like:

html:

 <h1 slide-toggle="#derp" slide-toggle-on="Less" slide-toggle-off="More" >More</h1> 

That way you can add any message to 'more' or 'less'.

js:

...
.directive('slideToggle', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        var target = document.querySelector(attrs.slideToggle);
        var messageOn = attrs.slideToggleOn;
        var messageOff =  attrs.slideToggleOff;

        attrs.expanded = false;
        element.bind('click', function() {

            var content = target.querySelector('.slideable_content');
            if(!attrs.expanded) {
                element.html(messageOn);
                content.style.border = '1px solid rgba(0,0,0,0)';
                var y = content.clientHeight;
                content.style.border = 0;
                target.style.height = y + 'px';
            } else {
                element.html(messageOff);
                target.style.height = '0px';
            }
            attrs.expanded = !attrs.expanded;
        });
    }
}

}); ...

Get the new attributes is:

var messageOn = attrs.slideToggleOn;

var messageOff = attrs.slideToggleOff;

To apply use:

element.html(messageOn);//not expanded;

element.html(messageOff);//already expanded;

Answer 2

I changed the source code a little bit to expose the toggle status. This is a little bit awkward but it works.

 restrict: 'A',
 scope : {
       expanded : "=expanded"
 },

Here is the link

Answer 3

AngularSlideables is working by manipulating the height of the <div> . You could key a model to the height of said div. So in your example, it could be captured as $('#derp').getBoundingClientRect().height – ===0 shows "more" >0 shows "less".

YMMV here. In a perfect world, AngularSlideables would provide an API to query this state (setting a data value on the element, perhaps.) Unless you want to add that to AngularSlideables, this solution could work.