如何為插件模糊圖像加載開發指令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