Оптимизация производительности длинных списков в AngularJS

[Tulov_Alex]

В стабильной версии Angular директивы ng-animate пока не было.

[Devgru]

ng-animate это вообще самая мутная вещь, которую я видел в Angular. Вы не знаете, есть уже какой-то внятный туториал для актуальной версии о том как, например, анимировать появление/исчезновение элементов ng-repeat или ng-show/ng-hide без танцев с бубном и доп. скриптов?

[xGromMx]

Можете посмореть тут www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

[Tulov_Alex]

Я вместо нее просто использую CSS3 анимации. Выходит все проще и понятнее.

[aav]

Вы имеете в виду, что официальная документация, например, для ngRepeat не отвечает на Ваш вопрос? И что Вы подразумеваете под «танцами с бубном» в данном конкретном случае?

[Devgru]

Идея анимации (ng-animate) в Ангуляре живёт уже год как, её реализовывали разными способами: используя CSS, вводя директиву (ng-animate), затем убирая её, часть событий освещена на упомянутом чуть выше блоге www.yearofmoo.com/. Но судя по всему сейчас ситуация уже устаканилась, всё должно работать.

[noma4i]

jQuery.live() удален в январе этого года.

[xGromMx]

Есть on и off =)

[noma4i]

Который не умеет следить за появлением новых элементов, а лишь вешает эвенты на будущие. Но эту боль я унесу с собой.

[Fesor]

вы видно сильно отстали от жизни. .on('event', document, callback) делает тоже самое что и live. Просто api для работы с ивентами в какой-то версии jQuery был унифицирован. life/bind/delegate считаются устаревшими и их все покрывает on.
вообще life и delegate тоже не умеют вешать события непосредственно на элементы. Там все за счет event-bulbing работает.

p.s. навешивать делегаты на document стоит только при крайней необходимости. Обычно достаточно навестить на контейнер в котором меняются элементы.

[noma4i]

Как я написал выше: .on умеет вешать эвенты на новые элементы. Но в отличии от live, не умеет следить за появлением новых. Иначе говоря, если я хочу просто получить alert() если на странице появится новый див, то .on мне не поможет.

Буду рад, если у вас есть решение на этот счет, без привлечения плагинов.

[Fesor]

возможно это немного не то что вы описывали но из того что я прочел, оно выходит как-то так. Хотя хотелось бы посмотреть как это делается через live.

и еще раз: on не умеет вешать события на новые/старые элементы. Оно вешает обработчик ТОЛЬКО на контейнер. И если у родительских элементов срабатывает этот ивент, он спокойно доходит до контейнера где обработчик проверяет элемент по селектору, и выполняет ваш обработчик в случае совпадения. Мне казалось что так же работает и live, но там чуть сложнее. В любом случае там непосредственно изменения dom дерева не отслеживаются.

[Fesor]

вот так ближе к теме

[noma4i]

DOMNodeInserted… Пойду голову пеплом посыплю.

[Fesor]

Маленькая оговорка. не везде работает, а точнее в ie меньше 11 не работает вообще (хотя вроде как есть полифилы)

[xGromMx]

Вот нашел еще github.com/allaud/quick-ng-repeat

[Fesor]

По поводу mouseenter. ng-mouseenter естественно навешивается на каждый элемент списка, и если элементов много лучше использовать делегированные события на весь контейнер. Это можно делать и на чистом js очень даже красиво и просто. Но вот $.live уж точно не стоит применять для этого. Зачем? (к тому же этот метод устарел и его вообще больше нету в jQuery).

[ivanuzzo]

Насколько я понимаю из документации по limitTo, у этого фильтра есть третий параметр begin, следовательно, startFrom здесь не нужен, а код можно изменить на такой:

item in displayedItemsList | limitTo: pageSize : currentPage * pageSize

исправьте меня, пожалуйста, если я ошибаюсь.