how to develop a directive AngularJS for a plugin blur image loading?

Question

I am developing a directive for the following plugin: blurry-image-load but I have a problem, the image does not load properly, the code of my directive and my view is as follows: ..

` <img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" data-large="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg" class="image-blur"/>

(function() {
      'use strict';        
      angular
        .module('angularTest')
        .directive('imageBlur',function(){
          return {
              restrict: 'C',
              link: function (scope, element, attrs) {
                   $('.image-blur').blurryLoad();
              }
          }
      })
    })();

Answer 1

Assuming you have more than one image and the directive is on the image elements themselves you should use the exposed element object in directive.

Otherwise each time directive initializes you will be initializing plugin again for all elements with that class

link: function (scope, element, attrs) {
     element.blurryLoad();
}

If images are being set up using ng-src you may also need to use $timeout if the plugin needs to access the proper src . This will allow for the plugin to get initialized at end of active digest cycle and by then the src should be set

link: function (scope, element, attrs) {
   $timeout(function(){// push this to end of digests
     element.blurryLoad();
   });
}

Make sure to inject $timeout in directive if you use it