Watch for filtering event in AngularJS - lazy loading images
angularjs, angularjs-directive, angularjs-ng-repeat
Solution
This is because you don't have a stabilized model in your ng-repeat directive.
If you initialize filteredTemplates model beforehand you should see that it's working:
<ul ng-init="filteredTemplates=( templates | filterByCategory: selectedCategories | filter: searchFilter )">
<li ng-repeat="template in filteredTemplates">
...
I've created a Fiddle that demonstrates this: http://jsfiddle.net/f757U/
You can find detailed explanations regarding this behaviour in the following posts:
- How to Loop through items returned by a function with ng-repeat?
- Infinite $digest() loop when using a function in ng:repeat
- Problem with nested ngRepeat - Uncaught Error: 10 $digest() iterations reached. Aborting!
Problem
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 ``` <li ng-repeat="template in filteredTemplates = ( templates | filterByCategory: selectedCategories | filter: searchFilter )"> <img ng-src="" lazy-src="{{template.cover.thumb.url}}" alt=""> </li> ``` 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)