如何为插件模糊图像加载开发指令AngularJS？

Question

我正在为以下插件开发指令： blurry-image-load但我有问题，图像无法正确加载，我的指令和视图的代码如下：..

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

假设您有多个图像，并且伪指令位于图像元素本身上，则应在伪指令中使用暴露的元素对象。

否则，每次时间指令都会初始化，您将再次为该类的所有元素初始化插件

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

如果使用ng-src设置图像，则如果插件需要访问正确的src则可能还需要使用$timeout 。 这将允许插件在活动摘要周期结束时初始化，然后应设置src

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

如果使用它，请确保在指令中注入$timeout