ng-show基于Angular指令？

Question

我正在使用AngularSlideables来平滑地展开和折叠一个区域，人们可以通过以下代码(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>

这可以很好地工作，但当详细信息区域展开时，我希望将More details更改为Less details (和一个减号图标)，以便您可以再次单击以更改回原处。

通常我会使用ng-show="some expression"来做这样的事情，但是我不知道在这里我可以使用什么类型的表达式来知道它是否扩展。

有人知道如何使用AngularSlideables-指令将Mode details更改为Less details吗？欢迎所有提示！

Answer 1

你可以这样做：

html：

这样你就可以将任何消息添加到“更多”或“更少”。

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;
        });
    }
}

})；...

获取新属性是：

变量messageOn = attrs.slideToggleOn；

Attrs.slideToggleOff messageOff = var；

要应用，请执行以下操作：

element.html(MessageOn)；//未展开；

Element.html(MessageOff)；//已经展开；

Answer 2

我稍微修改了一下源代码，以显示切换状态。这有点尴尬，但它是有效的。

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

这是link

Answer 3

AngularSlideables是通过操纵<div>的高度来工作的。您可以为模型设置关键帧，使其达到所述div的高度。因此，在您的示例中，它可以被捕获为$('#derp').getBoundingClientRect().height - ===0显示"more“>0显示"less”。

YMMV在这里。在理想的情况下，AngularSlideables应该提供一个API来查询这种状态(也许可以在元素上设置一个数据值)。除非你想把它添加到AngularSlideables中，否则这个解决方案是可行的。