Watch for filtering event in AngularJS – lazy loading images-Collection of common programming errors
I would like to watch for the filtering event from within my directive when filtering on ngRepeat occurs. Is there an event that gets emitted when filtering occurs?
What I am doing is implementing lazy loading of images for a list of thumbnails. It works but when I start filtering, the images that were out of viewport and come into view after filtering need to get their ng-src attribute replaced.
Here is the directive:
TemplateBrowser.directive('lazySrc', function() {
return function(scope, element, attrs) {
function replaceSrc() {
if (element.is(":in-viewport")) {
attrs.$set('ngSrc', attrs.lazySrc);
}
}
$(window).scroll( function() {
replaceSrc();
});
scope.$watch('filteredTemplates', function() {
replaceSrc();
});
};
});
HTML
Currently I get this error:
Error: 10 $digest() iterations reached. Aborting!
TLDR: Instead of watching a filtered collection for changes, is there a way to emit some kind of filtering event that the directive will listen to? (filtering occurs through a search field and a categories selection menu)