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">
    ...

これを示す Fiddle を作成しました: http://jsfiddle.net/f757U/

この動作に関する詳細な説明は、次の投稿で確認できます。

于 2013-04-30T14:05:35.493 に答える
0

これをチェックしてください https://github.com/revolunet/rn-lazy

同じ優秀な人からのカルーセルソリューションもあります。

于 2013-07-31T23:36:15.210 に答える