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

发布时间：2020-12-17 17:17:51 所属栏目：安全来源：网络整理

导读：当我想要在ngRepeat上进行过滤时,我想在我的指令中查看过滤事件.是否有过滤发生时会发出的事件？我正在做的是为缩略图列表实现延迟加载图像.它可以正常工作,但是当我开始过滤时,超出视口并在过滤后进入视图的图像需要替换它们的ng-src属性. 这是指令： Temp

当我想要在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：
而不是观察过滤集合的变化,有没有办法发出指令将侦听的某种过滤事件？
(通过搜索字段和类别选择菜单进行过滤)

解决方法

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

如果您事先初始化filterTemplates模型,您应该看到它正在工作：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!