AngularJS'de ng-src için görüntü yüklü olay

Benzeri görüntülerim var <img ng-src="dynamically inserted url"/>. Tek bir görüntü yüklendiğinde, görüntüyü kaydırılabilir hale getirmek için iScroll renew () yöntemini uygulamam gerekiyor.

Geri aramayı çalıştırmak için bir görüntünün tam olarak yüklendiğini bilmenin en iyi yolu nedir?

Image onload'ın nasıl çağrılacağına dair bir örnek http://jsfiddle.net/2CsfZ/2/

Temel fikir, bir yönerge oluşturmak ve bunu img etiketine öznitelik olarak eklemektir.

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

Bunu biraz değiştirdim, böylece özel $scopeyöntemler çağrılabilir:

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

Direktif:

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

Umarım birisi onu ÇOK yararlı bulur. Teşekkürler @mikach

doThis()Fonksiyon daha sonra $ kapsamı yöntemi olurdu

@ Oleg Tikhonov: Bir önceki kodu güncelledi .. @ mikach, Teşekkürler ..)

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

Cevabım:

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

Az önce önceki kodu güncelledi ..

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

ve yönerge ...

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

Temelde bu, kullandığım çözüm.

$ apply () yalnızca doğru koşullarda harici kaynaklar tarafından kullanılmalıdır.

Uygula'yı kullanmak yerine, çağrı yığınının sonuna kapsam güncellemesini attım. "Kapsam. $ Apply (attrs.imageonload) (true);" kadar iyi çalışır.

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

}]);