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


106

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?


Yanıtlar:


185

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

1
başarısızlık geri aramasına ne dersiniz?
Oleg Belousov

3
Peki ilerici imaj?
Nguyen Đức Long

148

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


3
Bu doğru. Mikach'ın çözümü, sizin yaptığınız gibi $ apply () kullanana kadar benim için işe yaramadı.
Jeremy Thille

Bu verilen cevapların en iyisidir. Herhangi bir JQUERY yüklemesi ihtiyacını da tamamen ortadan kaldırır.
Noel Baron

Tüylerin patlamaması için noktalı virgül koyduğunuz için teşekkür ederiz.
Richard


9

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

1
Farklı bir eylem gerçekleştirebilmeniz için bunu bir 'imageonerror' yönergesinde bulundurmak daha iyi olabilir.
Jon Catmull

5

Cevabım:

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

tam olarak aradığım şey!
Zohab Ali

4

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

0

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

}]);

" $apply()sadece dış kaynaklar tarafından kullanılmalıdır " derken ne demek istiyorsun ? takip etmiyorum.
Genuinefafa

@genuinefafa 'Dış kaynaklar' ile kastettiği, Açısal olmayan koddur. Örneğin, $ kapsamını değiştiren bir kodu çağırmak için jenerik bir JS olay dinleyicisi kullanıyorsanız, orada $ apply kullanmanız gerekir. Ancak bu bir Angular olay veya bir $ kapsam işlevi ise $ apply'a ihtiyacınız yoktur, çünkü $ Digular döngüsü zaten Angular yöntemlerden çalışıyor.
tpartee
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.