指令不在ng-repeat中工作

时间:2014-09-20 04:49:49

标签: javascript angularjs

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

1 个答案:

答案 0 :(得分: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
            });
        }
    };
})

Working Example