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

Question

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

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

如果您点击 Link 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
                });
            };
        }
    };
});

Answer 1

缺陷出现在这里：var target = element.parent()[0].querySelector('[slider]');。此语句 element.parent()[0] 将 return 当前元素的 parent 永远是 <article>.

此外：根据 'querySelector' 的文档，我假设 element.parent()[0].querySelector('[slider]') 将 select article 的第一个 child：

Returns the first element within the document (using depth-first pre-order traversal of the document's nodes) that matches the specified group of selectors

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

这是一个plunker

希望对您有所帮助！

Answer 2

快速修复：

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

改变

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

和

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

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

Angularjs Directive to slide show and hide content

javascript

angularjs

angularjs-directive

ng-show

ng-hide