Передача отфильтрованной коллекции в директиву Angular вызывает исключение

0

Я использую 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, но не в моем реальном приложении.

Теги:
angularjs-filter
angularjs-directive
plunker

1 ответ

1

На самом деле вы не фильтруете директиву; вы передаете отфильтрованные данные из вашего оператора 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'
        }
    }
});
  • 0
    Да, вы правы, но я действительно хочу работать с отфильтрованными данными, а не фильтровать в директиве. Это возможно?
  • 0
    @Yulian Не используйте директиву для фильтрации данных. Используйте пользовательский фильтр через сервис $filter .
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню