Gambar dimuat acara untuk ng-src di AngularJS

Saya memiliki gambar yang terlihat seperti <img ng-src="dynamically inserted url"/>. Ketika satu gambar dimuat, saya perlu menerapkan metode iScroll refresh () sehingga membuat gambar dapat digulir.

Apa cara terbaik untuk mengetahui saat gambar dimuat sepenuhnya untuk menjalankan beberapa callback?

Berikut adalah contoh bagaimana memanggil image onload http://jsfiddle.net/2CsfZ/2/

Ide dasarnya adalah membuat direktif dan menambahkannya sebagai atribut ke tag 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 />

Saya memodifikasi ini sedikit sehingga $scopemetode khusus dapat dipanggil:

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

Arahan:

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

Semoga seseorang menganggapnya SANGAT berguna. Terima kasih @mikach

The doThis()Fungsi kemudian akan menjadi metode $ lingkup

@ Oleg Tikhonov: Baru saja memperbarui kode sebelumnya .. @ mikach Terima kasih ..)

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

Jawabanku:

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

Baru saja memperbarui kode sebelumnya ..

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

dan direktif ...

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

Pada dasarnya ini adalah solusi yang akhirnya saya gunakan.

$ apply () hanya boleh digunakan oleh sumber eksternal dalam situasi yang tepat.

daripada menggunakan apply, saya telah melempar pembaruan lingkup ke akhir tumpukan panggilan. Berfungsi sebaik "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);
            });
        }
    };

}]);