Question

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

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

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

<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>

Answer 2

您应该使用ng-init代替。替换

onload="showImageDiv(img{({$index})})"

与

 ng-init="showImageDiv($index)"

由于您使用的是角度，请使用controller。在控制器内部，写下：

$scope.showImageDiv = function(index){
 jQuery('#img'+index).show();
}

更新：

您还可以使用ng-show代替jQuery：

<img src="{({ artist.fields.link })}" ng-init="showImageDiv($index)" ng-show="img[$index]" />

在controller：

$scope.img=[];
$scope.showdiv = function(index){
   $scope.img[index] = true;
}

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

2 个答案: