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指令中没有稳定的模型。

如果您事先初始化filterTemplates模型，您应该会看到它正在运行：

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

我创建了一个演示这个的小提琴：http://jsfiddle.net/f757U/

您可以在以下帖子中找到有关此行为的详细说明：

Answer 2

选中此https://github.com/revolunet/rn-lazy

同样出色的家伙也有carousel解决方案

观察AngularJS中的过滤事件 - 延迟加载图像

2 个答案: