Я использую Angular, и то, что я пытаюсь сделать, это передать фильтрованную коллекцию в директиву.
Мой вид выглядит следующим образом:
<h1>Filtered Collection (no directive)</h1>
<ul>
<li ng-repeat="person in filteredPeople = (people | filter: { isChecked: true })">
{{ person.name }}
</li>
</ul>
Данные, которые я передаю, - это просто массив объектов:
$scope.people = [
{
name: "George",
isChecked: false
},
{
name: "Jane",
isChecked: false
},
{
name: "Peter",
isChecked: true
}
];
Пока все работает нормально. Но когда я пытаюсь поместить HTML выше в директиве, приложение выйдет из строя.
Директива:
myApp.directive('filterPeople', function () {
return {
restrict: 'A',
template: '<h1>Filtered Collection (directive)</h1>' +
'<ul>' +
'<li ng-repeat="item in collection">{{ item.name }}</li>' +
'</ul>',
scope: {
collection: '=collection'
}
}
});
Посмотреть:
<div filter-people collection="filteredPeople"></div>
Ошибка, которую я получаю:
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations
PS Я загрузил свой пример в Plunker, и все работает там. Я проверил, является ли код в моем приложении тем же, и он есть. Итак, почему это происходит? Мой код работает на Plunker, но не в моем реальном приложении.
На самом деле вы не фильтруете директиву; вы передаете отфильтрованные данные из вашего оператора filterPeople в директиву для отображения. Приложение вылетает из-за того, что у вас есть одно ng-repeat, влияющее на выход другого ng-repeat, вызывающего бесконечный цикл (Angular убивает цикл после 10 рекурсий)
Plunkr здесь показывает правильный способ исправить это. Просто потяните свой фильтр в свою директиву.
http://plnkr.co/edit/avjr306MESGE8xE6yN1M?p=preview
myApp.directive('filterPeople', function() {
return {
restrict: 'A',
template: '<h1>Filtered Collection (directive)</h1>' +
'<ul>' +
'<li ng-repeat="item in collection | filter: { isChecked: true }">{{ item.name }}</li>' +
'</ul>',
scope: {
collection: '=collection'
}
}
});
$filter
.