AngularJS

Question

में ng-src के लिए छवि लोड की गई घटना में मेरे पास <img ng-src="dynamically inserted url"/> जैसी छवियां हैं। जब एक छवि लोड हो जाती है, तो मुझे छवि स्क्रॉल करने योग्य बनाने के लिए iScroll रीफ्रेश() विधि लागू करने की आवश्यकता होती है।

कुछ कॉलबैक चलाने के लिए कोई छवि पूरी तरह से लोड होने पर जानने का सबसे अच्छा तरीका क्या है?

Answer 1

यहाँ एक उदाहरण है कि कैसे छवि ऑनलोड कॉल करने के लिए http://jsfiddle.net/2CsfZ/2/

मूल विचार एक निर्देश बनाएं और टैग img लिए विशेषता के रूप में जोड़ना है।

जे एस:

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

Answer 2

मैं इस एक छोटे से इतना है कि कस्टम $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() समारोह तो एक $ गुंजाइश विधि

Answer 3

@ ओलेग टिकोनोव होगा: बस पिछले कोड .. अद्यतन @ 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'); 
     }); 
    } 
    }; 
}); 

Answer 4

बस पिछले अद्यतन कोड ..

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

Answer 5

असल में यह समाधान है जिसका उपयोग मैंने समाप्त किया।

$ लागू() केवल सही परिस्थितियों में बाह्य स्रोतों द्वारा उपयोग किया जाना चाहिए।

इसके बजाय आवेदन का उपयोग करके, मैंने कॉल स्टैक के अंत में अपडेट करने के दायरे को फेंक दिया है। "स्कोप। $ लागू (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); 
      }); 
     } 
    }; 

}]); 

Answer 6

मेरा जवाब:

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