4

当对 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： 有没有办法发出某种过滤事件，而不是观察过滤集合的变化？（通过搜索字段和类别选择菜单进行过滤）

4

2 回答 2

4

这是因为您的 ng-repeat 指令中没有稳定的模型。

如果您事先初始化了 filteredTemplates 模型，您应该会看到它正在工作：

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

我创建了一个小提琴来证明这一点：http: //jsfiddle.net/f757U/

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

于 2013-04-30T14:05:35.493 回答
0

检查这个https://github.com/revolunet/rn-lazy

同样的聪明人也有轮播解决方案

于 2013-07-31T23:36:15.210 回答