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

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

1 个答案: