Событие загрузки изображения для ng-src в AngularJS

У меня изображения выглядят как <img ng-src="dynamically inserted url"/>. Когда загружается одно изображение, мне нужно применить метод iScroll refresh (), чтобы сделать изображение прокручиваемым.

Как лучше всего узнать, когда изображение полностью загружено, чтобы выполнить обратный вызов?

Вот пример того, как вызвать загрузку изображения http://jsfiddle.net/2CsfZ/2/

Основная идея - создать директиву и добавить ее как атрибут в тег 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 />

Я немного изменил это, чтобы $scopeможно было вызывать собственные методы:

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

Директива:

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

Надеюсь, кто-то сочтет это ОЧЕНЬ полезным. Спасибо @mikach

Тогда doThis()функция будет методом $ scope

@ Олег Тихонов: Только что обновил предыдущий код .. @ mikach Спасибо ..)

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

Мой ответ:

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

Только что обновил предыдущий код ..

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

и директива ...

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

В основном это решение, которое я в итоге использовал.

$ apply () должен использоваться внешними источниками только при правильных обстоятельствах.

вместо того, чтобы использовать apply, я перебросил обновление области видимости в конец стека вызовов. Работает так же хорошо, как "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);
            });
        }
    };

}]);