在ng-repeat中使用的自定義指令中獲取元素屬性

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