在AngularJS中使用「ImagesLoaded」插件事件

Question

如果我的頁面的一部分被重新渲染，我想顯示一個加載指示器。從重新渲染的部分發出的事件被注意到。

我用http://desandro.github.io/imagesloaded/

在我的指令：

app.directive('pendingIndicator', function(){ 
    return { 
     restrict: 'A', 
     link: function(scope, element) { 
      scope.$on('pending', function(){ 
       scope.imgLoad = imagesLoaded(element); 
      }); 
     } 
    }; 
}); 

不幸的是拋出一個錯誤，如果我嘗試包裹imagesLoaded()在事件監聽器（$on）或$watch。從控制檯

錯誤消息：

TypeError: 'undefined' is not an object (evaluating 'eventie.bind') 

大家有什麼線索對那裏發生的，爲什麼這可能不工作？

Answer 1

我能夠使用ImagesLoaded插件，如this plunkr所示。

這僅僅是一個例子，指出你在正確的方向。理想情況下，您將提取Im​​agesLoaded插件的邏輯（不再需要Jquery），並在AngularJS中完成此操作。

我認爲你想以不同的方式聽取ImagesLoaded事件。這裏是修改的指令代碼w /一些評論/建議。

angular.module('myApp', []). 
    directive('pendingIndicator', function(){ 
    return { 
     restrict: 'A', 
     link: function(scope, element) { 
      // setup the container for ImagesLoaded ... note instead of using 
      // this directive on an individual image, you may consider using 
      // it on the element that contains many images... 
      scope.imagesLoaded = imagesLoaded(element); 
      // start your progress/loading animation here 
      // (or whenever you attempt to load the images) 
      scope.imagesLoaded.on('always', function() { 
       console.log('always event: Triggered after all images have been either loaded or confirmed broken.'); 
       // end the progress/loading animation here for all images or do 
       // it individually in the progress event handler below 
      }); 
      scope.imagesLoaded.on('done', function() { 
       console.log('done event: Triggered after all images have successfully loaded without any broken images.'); 
      }); 
      scope.imagesLoaded.on('fail', function() { 
       console.log('fail event: Triggered after all images have been loaded with at least one broken image.'); 
      }); 
      scope.imagesLoaded.on('progress', function(instance, image) { 
       console.log('proress event: Triggered after each image has been loaded.', instance, image); 
       // end the progress/loading animation here or do it for all images in the always 
       // event handler above 
      }); 

     } 
    }; 
});