在指令中获取图像src

Question

我有一个带有img标签的指令。

angular.module('example')
     .directive('customDirective', function() {
        return {
           restrict: 'E',
           replace: true,
           transclude: true,
           scope: {}, //isolate scope
           templateUrl: 'directives/customDirective.html'
           link: function(scope, element, attrs) {
              // returns undefined
              console.log(element.find('img').src);
           }
        };
     });

指令模板：

<div class="customDirective">
  <img src="image.jpg" />
</div>

我试图抓住图片代码上的src属性。

Answer 1

var src = element.find（'img'）。attr（'src'）;

这假设只有一个img标签。

Answer 2

在指令中设置源代码可能更容易。

指令

angular.module('example')
 .directive('customDirective', function() {
    return {
       restrict: 'E',
       replace: true,
       transclude: true,
       templateUrl: 'directives/customDirective.html'
       link: function(scope, element, attrs) {
          scope.imgSrc = 'image.jpg';
       }
    };
 });

模板

<div class="customDirective">
  <img ng-src="{{imgSrc}}" />
</div>

然后您的代码驱动模板而不是您需要从模板中读取数据。