Question

感谢EricWVGG的动画指令。

我使用以下html和angularJS指令来执行幻灯片动画。我无法将ngRepeat中的各个元素作为目标。当我将div ID作为常量保留在所有索引中时，动画可以正常工作。当我将$ index附加到div ID时，＆＃39; target为null＆＃39; Firebug中显示错误。

<div>
    <div class="title" slide-toggle="#row_{{$index}}">
        <div style="float: left; width: 100%;">
         </div>
    </div>
    <div id="row_{{$index}}" class="slideable" duration=".5s">
    </div>
</div>


.directive('slideable', function () {
return {
    restrict:'C',
    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
            });
        };
    }
};
})

.directive('slideToggle', function() {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        var target = document.querySelector(attrs.slideToggle);
        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;
                target.style.height = y + 'px';
            } else {
                target.style.height = '0px';
            }
            attrs.expanded = !attrs.expanded;
            }


        });
    }
};
})

Answer 1

$index只能在ng-repeat指令中找到，但在您的代码中实际上缺失。

你还需要{0}值的$timeout函数来等待Angular在执行你的代码之前更新DOM，否则所有div都带有id row_X，其中X是{{1的计算值将保持为$index，您将无法定位它们。（here和here了解更多信息）

以下是您的示例代码的 JSFiddle 。

动态生成的ID - 空目标

1 个答案: