觀察AngularJS中的過濾事件 - 延遲加載圖像

我想在過濾ngRepeat時，在我的指令中查看過濾事件。發生過濾時是否發生了事件？觀察AngularJS中的過濾事件 - 延遲加載圖像

我正在做的是爲縮略圖列表實現延遲加載圖像。它可以工作，但是當我開始過濾時，過濾後出現在視口外並進入視圖的圖像需要替換它們的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： 而不是看一個過濾收集的變化，有沒有辦法發出某種過濾事件，該指令將監聽？（通過搜索字段和類別選擇菜單進行篩選）

來源

2013-04-25 Bogdan Rybak

這是因爲您的ng-repeat指令中沒有穩定的模型。

如果初始化filteredTemplates模型事先你應該看到它的工作：

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

我已經創建了一個演示了這種小提琴：http://jsfiddle.net/f757U/

您可以找到有關此問題在下面的詳細說明帖子：

來源

2013-04-30 14:05:35 katranci

抱歉耽擱carousel解決方案，該項目被擱置了一段時間。這似乎工作，如果你有數據馬上。一旦數據是承諾，我就會遇到問題。感謝您的推動，但！ – 2013-05-18 19:46:43

嗨，我有同樣的問題，但我需要它這樣工作。 http://jsfiddle.net/f757U/ – egermano 2013-08-16 20:55:43

入住這https://github.com/revolunet/rn-lazy

還有來自同一輝煌傢伙

來源

2013-07-31 23:36:15 Kunthar

它似乎並不像懶惰實際上是一個懶惰的加載實現。它只是在圖像加載時顯示旋轉。我試圖實現的是防止客戶端請求圖像，除非它們實際上處於視口中，因爲它可以在充滿圖像的頁面上節省大量數據/請求。 – 2013-09-12 23:27:37

觀察AngularJS中的過濾事件 - 延遲加載圖像

回答

相關問題