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

Question

I am trying to hide an image until it is loaded, and then use the onload method to call a jQuery function that shows it. I use the angular ng-repeat property $index to assign a unique ID to each image div. The $index property works, since all my images have ID's like img0 , img1 , and so on. My problem is that onload is not passing the angular variable, which contains the unique div ID, to my function. Are angular variables unable to be used inside the onload method? If not, how can I make it so?

<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

It doesn't work this way - attribute onload is not a directive, so its value is not parsed by angular. You could use a custom directive though, for example (assuming there is a "myModule" module defined):

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

It would set the artist.visible field value to true after the load event. This should work after some changes to the markup:

<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

You should use ng-init instead. Replace

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

with

 ng-init="showImageDiv($index)"

And since you are using angular, make use of your controller . Inside your controller, write this:

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

Update :

You can also make use of ng-show , instead of jQuery :

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

And in controller :

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