Question

这让我有点疯狂。我需要在自定义属性中读取图像的src：

app.directive('imgTransform', function () {
    return {
        retrict: 'A',
        link: function (scope, elem, attrs) {
            console.log(elem.attr('ng-src'));
        }
    }
});

这样使用时效果很好：

<img ng-src='http://lorempixel.com/100/100/technics' alt="" img-transform="" />

但是，它在ng-repeat内无效：

<p ng-repeat='image in images'>
    <img ng-src='{{image}}' alt="" img-transform="" />
</p>

返回的值为{{image}}。我如何获得实际价值？

Answer 1

尝试使用attrs：

console.log(attrs.ngSrc);

小提琴：http://jsfiddle.net/6SuWD/

原因可能是ng-repeat使用原始DOM作为模板并为每次迭代重新创建它。对于某些（模糊我）原因，您正在阅读模板的属性。这个解释可能是非常错误的......

但是，由于Angular为您提供了访问属性的API，因此无论如何都更安全。

Answer 2

您必须使用$observe来监视此属性的更改，因为ng-repeat会插入ng-src的值。请参阅this reference。

Answer 3

LukaszBachman是对的。将插值传递给指令时，当指令处于链接阶段时，插值尚未触发。

如果你要做console.log（attrs）; - 在浏览器控制台中查看时，您会清楚地看到ngSrc上有实际值。但是，由于插入尚未启动，您无法访问它。

这样可以获得ngSrc的实际值：

myApp.directive('imgTransform', function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            attrs.$observe('ngSrc', function (val) {
                console.log(val);
            });
        }
    }
});

获取ng-repeat中使用的自定义指令中的元素属性

3 个答案: