Угловые вложенные фильтры и бесконечные $ digest Loop

Question

Я (как и многие другие) столкнулся с проблемой с бесконечным циклом $ digest. После прочтения многих SO Q & Как и потратив много времени на документацию AngularJS, я все еще не уверен, как построить этот компонент с использованием лучших практик.

Происхождение проблемы связано с вложенными фильтрами. Тем не менее, я целенаправленно разбиваю ответственность за функциональность таким образом, что считаю правильным.

Вот plnkr: http://plnkr.co/edit/RnPcMOTzRfTv5ye1ixJ3?p=preview

Как вы видите, есть директива пейджинга, которая принимает элементы массива, который фильтруется за пределы его объема.

<app-pager items="items | filter:filter.value" items-per-page="5"> 

В пользовательских директивах все функциональный постраничном обрабатываются:

<div class="pager"> 
    <div ng-transclude ng-repeat="item in items | limitTo:itemsPerPage:(page * itemsPerPage)"></div> 
    <uib-pagination total-items="items.length" items-per-page="itemsPerPage" ng-model="page"></uib-pagination> 
</div> 

Это технически работает, но он бросает на 10 $ дайджеста() итераций достигнута ошибка из-за мутировавший массив. О, и жаль насчет именования переменных, «предметы» повторно используются; его просто быстрый пример, и нет конфликта, поскольку директива pager создает изолированную область.

Я не хочу, чтобы фильтр был частью разбивки на страницы, и я не хочу повторять функции страницы в нескольких областях моего приложения.

Каков наилучший подход к реструктуризации, чтобы следовать лучшим практикам?

Обновление: Похоже, что AngularJS@1.3.15 не поддерживает второй параметр limitTo, но это не меняет корень проблемы.

Answer 1

Хорошо, дело об атрибуте items на <app-paper> элемент. Похоже, вы не должны использовать filter в выражении привязки данных, потому что это вызовет бесконечный цикл $digest, поскольку он заставляет его выполнять каждый раз, когда items были отфильтрованы.

Что вы можете сделать, это пройти фильтр value директиве вместе с нефильтрованногоitems. Затем вы создаете и используете свой собственный фильтр внутри директивы.

Вот мой plunker example (я изменил код как в html файлах, так и в js). Обратите внимание, как я фильтрую длину страниц (кстати, у вас была небольшая ошибка в логике фильтрации смещения страниц).

Но! Как вы упомянули:

AngularJS@1.3.15 не поддерживает второй параметр limitTo

Итак, я полагаю, вы должны создать свой собственный фильтр, чтобы заставить его работать правильно. Вот мой another plunker example о том, как он работает с AngularJS@1.5.8