javascript - 使用 angular 指令和 jqLit​​e 选择第一个子图像标签

Question

我有一个循环执行的指令，名为 waPages。

这个标签里面有几个子节点；其中之一是图像标签。

模板:

<li wa-pages page="page" ng-repeat="page in carousel.pages"></li>

内部模板:

<div id="page-{{page.pageindex}}">
  <img  ng-src="{{page.imageurl}}" on-load />
</div>

问题:

如何选择这个图片标签并获取内部宽度/高度

页面指令:

angular.module('carouselApp')
.directive('waPages',  function (Pages, Carousel) {
    return {
        scope: {
            page: "="
        },
        templateUrl: 'views/wa.pages.html',
        transclude: true,
        require: '^waCarousel',
        link: function (scope, el, attrs, ctrl) {
            //this wont work obviously
            var imageWidth = el[0].find('img:first-child').innerWidth;
        }
    }

});

更新她的 console.log(el[0]);

Answer 1

只是扩展我的评论来回答，你可以在 img 标签上设置 onload 事件。所以一旦图像被加载捕获它的尺寸。还要注意选择器。

从模板中删除 ng-src 并直接在元素上设置它:-

.directive('waPages',  function ($window) {
    return {
        scope: {
            page: "="
        },
        templateUrl: 'wa.pages.html',
        transclude: true,

        link: function (scope, el, attrs, ctrl) {
           var $img = el.find('img')[0]; //get the image
            $img.src = scope.page.imageurl; //set the url

            $img.onload = function() {
              console.log(this.width, this.height); //Get height and width
            }
        }
    }
});

Plnkr

如果您通过 css 为图像设置了特定的高度和宽度，则加载具有不同尺寸的图像将不会为您获取真实尺寸。在这种情况下，您可以从 naturalWidth/naturalHeight 获得其原始宽度。图片的属性(旧浏览器不支持)。

 link: function (scope, el, attrs, ctrl) {
       var $img = el.find('img')[0];
        //Just set ng-src itself
        //$img.src = scope.page.imageurl;

        $img.onload = function() {
          console.log(this.naturalWidth, this.naturalHeight);
        }
    }

Plnkr

您还可以创建一个临时图像标签并加载图像 src 并获取其高度和宽度。 <强> Plnkr