{"id":1793,"date":"2022-08-30T15:19:29","date_gmt":"2022-08-30T15:19:29","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/12\/02\/watch-for-filtering-event-in-angularjs-lazy-loading-images-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:19:29","modified_gmt":"2022-08-30T15:19:29","slug":"watch-for-filtering-event-in-angularjs-lazy-loading-images-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/watch-for-filtering-event-in-angularjs-lazy-loading-images-collection-of-common-programming-errors\/","title":{"rendered":"Watch for filtering event in AngularJS &#8211; lazy loading images-Collection of common programming errors"},"content":{"rendered":"<p>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?<\/p>\n<p>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.<\/p>\n<p><strong>Here is the directive:<\/strong><\/p>\n<pre><code>TemplateBrowser.directive('lazySrc', function() {\n    return function(scope, element, attrs) {\n        function replaceSrc() {\n            if (element.is(\":in-viewport\")) {\n                attrs.$set('ngSrc', attrs.lazySrc);\n            }\n        }\n\n        $(window).scroll( function() {\n            replaceSrc();\n        });\n\n        scope.$watch('filteredTemplates', function() {\n            replaceSrc();\n        });\n    };\n});\n<\/code><\/pre>\n<p><strong>HTML<\/strong><\/p>\n<li ng-repeat=\"template in filteredTemplates = ( templates | filterByCategory: selectedCategories | filter: searchFilter )\"><code><img ng-src=\"\" lazy-src=\"{{template.cover.thumb.url}}\" alt=\"\" \/><\/code><\/li>\n<pre> \n<\/pre>\n<p><code><strong>Currently I get this error:<\/strong><\/code><\/p>\n<pre><code><code>Error: 10 $digest() iterations reached. Aborting!\n<\/code><\/code><\/pre>\n<p><strong>TLDR:<\/strong> 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)<\/p>\n<p id=\"rop\"><small>Originally posted 2013-12-02 01:31:51. <\/small><\/p>","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1793","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1793"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1793\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}