javascript - 指令在ng-repeat中不起作用

我有一个简单的指令，当您将鼠标悬停在小图像上时，会显示大图像的工具提示。当我将其添加到ng-repeat中时，它停止工作。该指令运行后，它甚至在主体底部创建了工具提示元素，但是当我将鼠标悬停在上方时，什么都没有显示。

的HTML：

<div ng-repeat="photo in photos track by $index" id="photo{{$index}}" data-tooltip-img="./photos/{{photo.large}}" big-photo>
  <a href="#">
    <img src="./photos/{{photo.small}}" alt="{{photo.name}}">
  </a>
</div>

指令：

.directive('bigPhoto', function () {
    return {
        restrict: 'A',
        link: function (scope, el, attr) {
            var targetTag = "#"+attr['id'],
                xPos = (attr['tooltipPos'] && attr['tooltipPos'] === 'left') ? -304 : 20;
            angular.element(targetTag).wTooltip({
                delay: 0,
                offsetX: xPos,
                offsetY: 20,
                content: '<img src="'+attr['tooltipImg']+'" alt="'+attr['title']+'">',
                style: false
            });
        }
    };
})

jsFiddle：http://jsfiddle.net/codephobia/k6Ljzg7j/

最佳答案

问题是您正在访问这样的元素：angular.element(targetTag)，并且当您的指令在ng-repeat中执行时，angular无法访问这样的元素（因为它尚未完成创建元素），但是链接功能为您提供了与创建元素相同的元素，因此您应该使用链接功能为您提供的元素。

因此，您的指令应如下所示：

app.directive('bigPhoto', function () {
    return {
        restrict: 'A',
        link: function (scope, el, attr) {
            var targetTag = "#"+attr['id'],
                xPos = (attr['tooltipPos'] && attr['tooltipPos'] === 'left') ? -304 : 20;
            el.wTooltip({
                delay: 0,
                offsetX: xPos,
                offsetY: 20,
                content: '<img src="'+attr['tooltipImg']+'" alt="">',
                style: false
            });
        }
    };
})

Working Example

关于javascript - 指令在ng-repeat中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25945354/