Question

我有一个简单的指令，当您将鼠标悬停在小图片上时会显示较大图像的工具提示。当我将它添加到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/

Answer 1

问题是你正在访问这样的元素：angular.element(targetTag)当你的指令在ng-repeat内执行时，angular无法访问这样的元素（因为它没有＆＃ 39; t完成了元素的创建），但是链接函数为你提供了与它创建的元素相同的元素，因此你应该使用它通过链接函数给你的元素。

所以，你的指令应如下所示：

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
            });
        }
    };
})

指令不在ng-repeat中工作

1 个答案:

Working Example