Événement chargé d'image dans pour ng-src dans AngularJS

J'ai des images qui ressemblent à <img ng-src="dynamically inserted url"/>. Lorsqu'une seule image est chargée, je dois appliquer la méthode iScroll refresh () pour que l'image puisse faire défiler.

Quelle est la meilleure façon de savoir quand une image est complètement chargée pour exécuter un rappel?

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

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

JS:

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

HTML:

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

J'ai un peu modifié ceci pour que les $scopeméthodes personnalisées puissent ê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 le trouvera TRÈS utile. Merci @mikach

La doThis()fonction serait alors une méthode $ scope

@ Oleg Tikhonov: Je viens de mettre à jour le code précédent .. @ mikach Merci ..)

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

Ma réponse:

 var img = new Image();
 var imgUrl = "path_to_image.jpg";
 img.src = imgUrl;
 img.onload = function () {
      $scope.pic = img.src;
 }

Je viens de mettre à jour le code précédent.

<img ng-src="{{urlImg}}" imageonload="myOnLoadImagenFunction">

et directive ...

    .directive('imageonload', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                element.bind('load', function() {
                    scope.$apply(attrs.imageonload)(true);
                });
                element.bind('error', function(){
                  scope.$apply(attrs.imageonload)(false);
                });
            }
        };
    })

En gros, c'est la solution que j'ai fini par utiliser.

$ apply () ne doit être utilisé par des sources externes que dans les bonnes circonstances.

plutôt que d'utiliser apply, j'ai jeté la mise à jour de la portée à la fin de la pile d'appels. Fonctionne aussi bien que "scope. $ Apply (attrs.imageonload) (true);".

window.app.directive("onImageload", ["$timeout", function($timeout) {

    function timeOut(value, scope) {
        $timeout(function() {
            scope.imageLoaded = value;
        });
    }

    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {
                timeOut(true, scope);
            }).bind('error', function() {
                timeOut(false, scope);
            });
        }
    };

}]);