Image chargée événement pour le gn-src dans AngularJS

Question

J'ai des images ressemblant <img ng-src="dynamically inserted url"/>. Lorsqu'une seule image est chargée, j'ai besoin d'appliquer iScroll méthode refresh (), de sorte à rendre l'image de défilement.

Quelle est la meilleure façon de savoir si une image est complètement chargé d'exécuter certains de rappel?

Answer 1

Voici un exemple de comment appeler image onload http://jsfiddle.net/2CsfZ/2/

L'idée de base est de créer une directive et l'ajouter en tant qu'attribut de la balise img.

JS:

app.directive('imageonload', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {
                alert('image is loaded');
            });
        }
    };
});

HTML:

 <img ng-src="{{src}}" imageonload />

Answer 2

J'ai modifié un peu, de sorte que la coutume $scope méthodes peuvent être appelées:

<img ng-src="{{src}}" imageonload="doThis()" />

La directive:

.directive('imageonload', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                element.bind('load', function() {
                    //call the function that was passed
                    scope.$apply(attrs.imageonload);
                });
            }
        };
    })

J'espère que quelqu'un trouve que c'est TRÈS utile. Merci @mikach

L' doThis() fonction serait alors un $champ d'application de la méthode