it-swarm.dev

تم تحميل الحدث في صورة لـ ng-src في AngularJS

لدي صور تبدو وكأنها <img ng-src="dynamically inserted url"/>. عند تحميل صورة واحدة ، أحتاج إلى تطبيق طريقة تحديث iScroll بحيث تجعل الصورة قابلة للتمرير.

ما هي أفضل طريقة لمعرفة متى يتم تحميل صورة بالكامل لتشغيل بعض رد الاتصال؟

104
Sergei Basharov

فيما يلي مثال على كيفية الاتصال بالصورة onload http://jsfiddle.net/2CsfZ/2/

الفكرة الأساسية هي إنشاء توجيه وإضافته كسمة إلى img tag.

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

قمت بتعديل هذا قليلاً حتى يمكن استدعاء أساليب $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() ستكون حينها طريقة نطاق $

141
Peter

@ أوليغ تيخونوف: مجرد تحديث الرمز السابق .. @ 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');
        });
    }
  };
});
9
Kailash

مجرد تحديث الرمز السابق ..

<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);
                });
            }
        };
    })
4
Ramiro Spain

إجابتي:

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

أساسا هذا هو الحل انتهى بي الأمر باستخدام.

يجب تطبيق $ (() فقط من قبل مصادر خارجية في الظروف المناسبة.

بدلاً من ذلك ، استخدم تطبيق ، لقد ألقيت تحديث النطاق حتى نهاية مكدس الاتصال. يعمل بشكل جيد مثل "النطاق. تطبيق $ (attrs.imageonload) (صحيح) ؛".

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

}]);
0
Doug