指令在ng-repeat中不起作用

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無法訪問那樣的元素（因為它尚未完成創建元素） ，但是link函數給您的元素與創建時相同，因此您應該使用link函數給您的元素。

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

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

工作實例