Bild geladenes Ereignis in für ng-src in AngularJS

Ich habe Bilder, die aussehen wie <img ng-src="dynamically inserted url"/>. Wenn ein einzelnes Bild geladen wird, muss ich die iScroll refresh () -Methode anwenden, damit das Bild scrollbar ist.

Was ist der beste Weg, um festzustellen, wann ein Bild vollständig geladen ist, um einen Rückruf auszuführen?

Hier ist ein Beispiel für das Aufrufen von Image Onload http://jsfiddle.net/2CsfZ/2/

Die Grundidee besteht darin, eine Direktive zu erstellen und sie als Attribut zum img-Tag hinzuzufügen.

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 />

Ich habe dies ein wenig geändert, damit benutzerdefinierte $scopeMethoden aufgerufen werden können:

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

Die Richtlinie:

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

Hoffe, jemand findet es sehr nützlich. Danke @mikach

Die doThis()Funktion wäre dann eine $ scope-Methode

@ Oleg Tikhonov: Habe gerade den vorherigen Code aktualisiert .. @ mikach Danke ..)

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

Gerade den vorherigen Code aktualisiert ..

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

und Richtlinie ...

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

Meine Antwort:

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

Im Grunde ist dies die Lösung, die ich letztendlich verwendet habe.

$ apply () sollte nur unter den richtigen Umständen von externen Quellen verwendet werden.

Anstatt Apply zu verwenden, habe ich die Bereichsaktualisierung auf das Ende des Aufrufstapels geworfen. Funktioniert so gut wie "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);
            });
        }
    };

}]);