javascript - 如何使用 Angularjs 在加载时显示图像？

Question

我试图在加载图像之前隐藏它，然后使用 onload 方法调用显示它的 jQuery 函数。我使用 Angular ng-repeat 属性 $index 为每个图像 div 分配一个唯一的 ID。 $index 属性有效，因为我所有的图像都有 ID，例如 img0、img1 等等。我的问题是 onload 没有将包含唯一 div ID 的 Angular 变量传递给我的函数。 onload 方法中是否不能使用 Angular 变量？如果没有，我怎样才能做到这一点？

<div class="hello" ng-repeat="artist in artists" ng-hide="!artiste">
    <div class="paintings" id="img{({$index})}" style="display:none;">
        <a href="{({ artist.fields.link })}">
            <img src="{({ artist.fields.link })}" onload="showImageDiv(img{({$index})})" />
        </a>

        <h3> {({ artist.fields.title })} </h3>
    </div>
</div>

<script>
     function showImageDiv(imageDivId){   // never receives imageDivId
         $('#' + imageDivId).show();
     };
</script>

Answer 1

这种方式行不通 - 属性 onload 不是指令，因此它的值不会被 Angular 解析。不过，您可以使用自定义指令，例如(假设定义了一个“myModule”模块):

angular.module("myModule").directive("showOnLoad", function() {
    return {
        link: function(scope, element) {
            element.on("load", function() {
                scope.$apply(function() {
                    scope.artist.visible = true;
                });
            });
        }
    };
});

它会在 load 事件之后将 artist.visible 字段值设置为 true。这应该在对标记进行一些更改后起作用:

<div class="paintings" ng-show="artist.visible">
    <a href="{{ artist.fields.link }}">
    <img ng-src="{{ artist.fields.link }}" show-on-load /></a>
    <h3> {{ artist.fields.title }} </h3>
</div>