এনগুলারজেএস-এ এনজি-এসসিআর-এর জন্য চিত্র লোড করা ইভেন্ট

Question

আমি ছবি মত খুঁজছি আছে <img ng-src="dynamically inserted url"/>। যখন কোনও একক চিত্র লোড হয়, তখন আই-স্ক্রোল রিফ্রেশ () পদ্ধতি প্রয়োগ করতে হবে যাতে চিত্রটি স্ক্রোলযোগ্য হয়।

কোনও কলব্যাক চালানোর জন্য যখন কোনও চিত্র পুরোপুরি লোড হয় তখন তা জানার সর্বোত্তম উপায় কী?

Comments

কটাক্ষপাত $ HTTP প্রতিক্রিয়া interceptors । প্রতিশ্রুতিটি সমাধান হওয়ার পরে আপনি কলব্যাকটি নিবন্ধকরণ করতে এটি ব্যবহার করতে পারেন

— মার্ক মেয়ার

Answer 1

চিত্রটি কীভাবে লোড করতে হবে তার একটি উদাহরণ এখানে দেওয়া হয়েছে http://jsfiddle.net/2CsfZ/2/

বুনিয়াদি ধারণাটি একটি নির্দেশিকা তৈরি করে এবং এটি ইমগ ট্যাগের বৈশিষ্ট্য হিসাবে যুক্ত করে।

জাতীয়:

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

এইচটিএমএল:

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

Comments

ব্যর্থ কলব্যাক সম্পর্কে কী?

— ওলেগ বেলোসভ

প্রগতিশীল চিত্র সম্পর্কে কী?

— Nguyễn Đức দীর্ঘ

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

আশা করি কেউ এটিকে খুব দরকারী বলে মনে করেন। ধন্যবাদ @ এমিকাচ

doThis()ফাংশন তারপর একটি $ সুযোগ পদ্ধতি হবে

Comments

এটাই সঠিক. আমি যেমন did প্রয়োগ () ব্যবহার করি ততক্ষণ মিক্যাচের সমাধান আমার পক্ষে কাজ করে না।

— জেরেমি থিল 9

এটি দেওয়া উত্তরের মধ্যে সেরা। সামগ্রিকভাবে যে কোনও জ্যাকুয়েরি লোডিংয়ের প্রয়োজনীয়তাও দূর করে।

— নওল ব্যারন

আধা-কলোন স্থাপনের জন্য আপনাকে ধন্যবাদ যাতে লিন্টটি বিস্ফোরিত হয় না।

— রিচার্ড

এটি আমাকে এই ত্রুটিটি দেয়: কোড. angularjs.org/1.4.9/docs/error/$rootScope/…

— পাওলো রবার্তো রোজা

Answer 3

@ ওলেগ টিখোনভ: সবেমাত্র আগের কোডটি আপডেট করেছেন .. @ মিক্যাচ ধন্যবাদ ..)

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

Comments

কোনও 'ইমেজনোনার' নির্দেশিকায় এটির চেয়ে ভাল হতে পারে যাতে আপনি অন্য কোনও ক্রিয়া সম্পাদন করতে পারেন।

— জন ক্যাটমুল

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

আমার উত্তর:

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

Comments

ঠিক আমি খুঁজছেন ছিল কি!

— জোহাব আলি

Answer 6

মূলত এটি সমাধান যা আমি ব্যবহার করে শেষ করেছি।

$ প্রয়োগ () কেবলমাত্র সঠিক পরিস্থিতিতে বাহ্যিক উত্স দ্বারা ব্যবহার করা উচিত।

তারপরে প্রয়োগ ব্যবহার করে, কল স্ট্যাকের শেষের দিকে স্কোপ আপডেট করার সুযোগটি ফেলে দিয়েছি। "স্কোপ। $ প্রয়োগ (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);
            });
        }
    };

}]);

Comments

" $apply()কেবলমাত্র বাহ্যিক উত্স দ্বারা ব্যবহার করা উচিত " বলতে আপনার কী বোঝায় ? আমি অনুসরণ করছি না

— জেনুইনফাফা

@ জেনুইনফাফা 'বাহ্যিক উত্স' বলতে যা বোঝায় তা অ-কৌনিক কোড। সুতরাং উদাহরণস্বরূপ, আপনি যদি জেনেরিক জেএস ইভেন্ট শ্রোতাদের কোডে কল করতে to স্কোপ পরিবর্তন করে থাকেন তবে আপনাকে সেখানে প্রয়োগ করতে হবে। তবে এটি যদি একটি কৌণিক ঘটনা বা একটি $ স্কোপ ফাংশন আপনার প্রয়োজন হয় না $ প্রয়োগ করুন কারণ $ ডাইজেস্ট চক্র ইতিমধ্যে কৌণিক পদ্ধতি থেকে চলছে।

— tpartee