使用 ng-src 时如何在 Angular 指令中访问 src 属性

Question

我有以下 HTML（在 gsp 中）：

<img ng-src="${resource(dir: '')}/images/stores/closeBTN.svg" />

我想使用 Modernizr 来检测是否支持 SVG，如果不支持，则将图像切换为 png。我已经修改了这个指令：https://github.com/tinacious/angular-svg-png

angular.module('svgPng', [])
  .directive('img', function () {
    return {
      restrict: 'E',
      link: function (scope, elem, attrs) {
        if ( typeof Modernizr !== 'undefined' && !Modernizr.svg ) {
          elem.attr('src', attrs.src.replace('.svg', '.png'));
        }
      }
    };
  });

问题是 attrs.src 未定义，因此替换不起作用。我知道 ng-src 应该填充 src，所以我需要强制一个摘要循环或其他东西来定义 src 吗？

Answer 1

在处理ng-src 并添加 src 属性的摘要周期之前，您这样做太早了。因此，让摘要循环发生，您可以通过将其放入 $timeout 或使用 setTimeout 来确保它。

 .directive('img', function () {
    return {
      restrict: 'E',
      link: function (scope, elem, attrs) {
        if ( typeof Modernizr !== 'undefined' && !Modernizr.svg ) {
         $timeout(function(){
            elem.attr('src', attrs.src.replace('.svg', '.png'));
         }, false);
        }
      }
    };
  });

或者更好的选择是不要在ngSrc 有机会处理它之前过早进行替换。使用 compile 函数替换 ng-src 属性值中的扩展名，这也可以防止加载两个图像，因为它会在前一种情况下发生（一个带有 .svg，一个带有 .png）。

 .directive('img', function () {
        return {
          restrict: 'E',
          compile: function (elem, attrs) {
            if ( typeof Modernizr !== 'undefined' && !Modernizr.svg ) {
               attrs.$set('ngSrc', attrs.ngSrc.replace('.svg', '.png'));
            }
          }
      };
 });