ng-show 基于 Angular 指令？答案

【问题标题】：ng-show on basis of Angular directive?ng-show 基于 Angular 指令？
【发布时间】：2015-09-28 18:17:20
【问题描述】：

我正在使用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 吗？欢迎所有提示！

【问题讨论】：

你试过我的答案了吗？

标签： javascript angularjs angularjs-directive

【解决方案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);//已经展开;

【讨论】：

告诉我它是否有效，我已经在你的 Fiddle 上进行了测试。 @kramer65
嗨，阿尔瓦罗。我还没有尝试过，主要是因为对于这么简单的事情，它看起来有很多代码，而且我并不真正理解它。我现在想通过在单击滑动切换元素时简单地将模型设置为 true 并在再次单击它时将其设置为 false 来解决它。在此基础上，我将文本设置为“更多细节”或“更少细节”。您如何看待该解决方案？
element.html("更多");和 element.html("Less");这是一条线。以及实现目标的最快捷方式。使用 ng-model 你会看到一些问题，我已经尝试过了，然后做了我向你展示的这个改变。
但是这个网站需要多语种，这意味着我不能依赖它在文本中所说的内容。
在这种情况下，您可以向指令添加更多自定义 attr 以自定义解决方案，使其更加优雅。会更新答案

【解决方案2】：

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

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

这里是link

【讨论】：

看起来不错。但是当我在一个页面/控制器中有多个扩展部分时，这不会造成麻烦吗？
我现在更新了链接。我认为我们可以只在指令创建的隔离范围内使用变量。所以我们不用担心多重扩展

【解决方案3】：

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

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

【讨论】：

我认为这不是最佳做法。