Наблюдать за фильтрованием события в AngularJS - lazy loading images

Question

Я хочу посмотреть событие фильтрации из моей директивы, когда происходит фильтрация на ngRepeat. Есть ли событие, которое возникает при фильтрации?

Что я делаю, это осуществление ленивой загрузки изображений для списка миниатюр. Он работает, но когда я начинаю фильтровать, изображения, которые были вне видимости и видны после фильтрации, должны заменить атрибут ng-src.

Вот директива:

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> 

В настоящее время я получаю эту ошибку:

Error: 10 $digest() iterations reached. Aborting! 

TLDR: Вместо просмотра фильтрованной коллекции для изменений есть ли способ испустить какое-то фильтрующее событие, которое будет прослушивать директива? (фильтрация происходит через поле поиска и меню выбора категорий)

Answer 1

Это потому, что у вас нет стабилизированной модели в вашей директиве ng-repeat.

Если инициализировать filteredTemplates модели заранее, вы должны видеть, что это работает:

<ul ng-init="filteredTemplates=(templates | filterByCategory: selectedCategories | filter: searchFilter)"> 
    <li ng-repeat="template in filteredTemplates"> 
    ... 

Я создал скрипку, который демонстрирует это: http://jsfiddle.net/f757U/

Вы можете найти подробные разъяснения в отношении такого поведения в следующем сообщений:

• 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!

Answer 2

Проверить это https://github.com/revolunet/rn-lazy

Существует также carousel решение от тех же блестящих парней