用于幻灯片放映和隐藏内容的 Angularjs 指令

Posted 2023-03-06

【中文标题】用于幻灯片放映和隐藏内容的 Angularjs 指令

【英文标题】：Angularjs Directive to slide show and hide content

【发布时间】：2015-05-14 12:26:26

【问题描述】：

我使用Slide up/down effect with ng-show and ng-animate 作为我的问题的基础。但是，该指令只允许隐藏/显示一个元素。当有 2 个时，只显示第一个：

这是一个笨蛋：http://plnkr.co/edit/YtPgcUcnapiQfAR5hxiE?p=preview

如果您点击链接 2，它将显示第一个内容。

angular.module('app', [])
.directive('sliderToggle', function() 
    return 
        restrict: 'AE',
        link: function(scope, element, attrs) 
            var target = element.parent()[0].querySelector('[slider]');
            attrs.expanded = false;
            element.bind('click', function() 
                var content = target.querySelector('.slideable_content');
                if(!attrs.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';
                
                attrs.expanded = !attrs.expanded;
            );
        
    
)
.directive('slider', function () 
    return 
        restrict:'A',
        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
                );
            ;
        
    ;
);

【问题讨论】：

不是一个非常优雅的方法，为什么不直接使用ng-class？

@charlietfl - 我用谷歌搜索过这个答案是最好的。如果您有 ng 级的方法，请分享。

【参考方案1】：

漏洞出现在这里：var target = element.parent()[0].querySelector('[slider]');。这条语句element.parent()[0] 将返回当前元素的父元素，它始终是<article>。

进一步：我假设element.parent()[0].querySelector('[slider]') 将根据'querySelector' 的文档选择article 的第一个孩子：

返回文档中的第一个元素（使用深度优先 文档节点的前序遍历）匹配 指定的选择器组

如果你想在你的按钮后面选择一个滑块，你应该使用var target = element.next()[0];。 或者var target = element.next('[slider]')[0];如果不是直接在后面；

这是plunker

希望这会有所帮助！

【参考方案2】：

快速修复：

http://plnkr.co/edit/uvjNUxzROqBob7ZgCgxh?p=preview

变化

var target = element.parent()[0].querySelector('[slider]');

与

var target = element.next('[slider]')[0];