Подія завантажена зображенням для 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()функція буде методом діапазону $

@ Олег Тихонов: Щойно оновив попередній код .. @ 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, я кинув оновлення сфери на кінець стека викликів. Працює так само добре, як "область. $ 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);
            });
        }
    };

}]);