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：

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

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

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

}）; ...

获取新属性是：

var messageOn = attrs.slideToggleOn;

var messageOff = attrs.slideToggleOff;

申请使用：

element.html（messageOn）; //未展开;

element.html（messageOff）; //已展开;

Answer 2

我稍微更改了源代码以显示切换状态。这有点尴尬，但它确实有效。

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

以下是link

Answer 3

AngularSlideables正在通过操纵<div>的高度来工作。你可以将模型键入所述div的高度。因此，在您的示例中，可以将其捕获为$('#derp').getBoundingClientRect().height - ===0显示“更多”>0显示“更少”。

YMMV在这里。在一个完美的世界中，AngularSlideables会提供一个API来查询这个状态（也许是在元素上设置数据值。）除非你想将它添加到AngularSlideables，否则这个解决方案可以工作。

ng-show基于Angular指令？

3 个答案: