Evento cargado de imagen para ng-src en AngularJS

Tengo imágenes que parecen <img ng-src="dynamically inserted url"/>. Cuando se carga una sola imagen, necesito aplicar el método iScroll refresh () para que la imagen sea desplazable.

¿Cuál es la mejor manera de saber cuándo una imagen está completamente cargada para ejecutar alguna devolución de llamada?

Aquí hay un ejemplo de cómo llamar a image onload http://jsfiddle.net/2CsfZ/2/

La idea básica es crear una directiva y agregarla como atributo a la etiqueta 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 />

Modifiqué esto un poco para que $scopese puedan llamar a métodos personalizados :

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

La directiva:

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

Espero que alguien lo encuentre MUY útil. Gracias @mikach

La doThis()función sería entonces un método $ scope

@ Oleg Tikhonov: Acabo de actualizar el código anterior .. @ mikach Gracias ..)

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

Mi respuesta:

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

Acabo de actualizar el código anterior.

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

y directiva ...

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

Básicamente, esta es la solución que terminé usando.

$ apply () solo debe ser utilizado por fuentes externas en las circunstancias adecuadas.

en lugar de usar aplicar, lancé la actualización del alcance al final de la pila de llamadas. Funciona tan bien como "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);
            });
        }
    };

}]);