Блог

У меня есть стандартная страница Master> Details в настройке AngularJS с использованием routeProvider.

Главная страница имеет вариант «бесконечной прокрутки», где данные могут добавляться и удаляться с обоих концов. Допустим, пользователь просматривает список контактов и прокрутил до 312-й записи списка контактов, сохраняются только контакты с номерами 200-400, а записи 1-200 удаляются из области видимости. Конечно, когда пользователь прокручивает страницу ниже 360, к списку добавляется 401-500. И если прокрутка превышает 240, список «предварительно отложен» на 100-199.

Теперь пользователь может нажать на конкретный контакт и перейти на страницу сведений. После нажатия кнопки «Назад» (window.history.back) как мне выполнить повторный рендеринг главной страницы с помощью,

1. Точный список 200-400, как это было, когда страница была оставлена

2. Прокручивается точно до позиции 312

3. (ВАЖНО) Слушатели все еще правильно прослушивают события прокрутки за пределами 360 или выше 240?

Возможно ли это вообще? И если да, пожалуйста, помогите мне с каким образом.

Я не собираюсь писать код для этого, это немного сложно без более глубокого понимания того, как работает ваша бесконечная прокрутка, но предложу несколько идей

Первое, что вам нужно было бы сохранить состояние просмотра в сервисе и для более надежной сохраняемости (перезагрузки страницы или повторных посещений) в localStorage, синхронизированном с сервисом.

Основной начальной точкой для состояния просмотра будет начальный индекс, чтобы вы знали, что фильтровать в вашем массиве данных… и либо значение длины, которое может быть или не быть постоянным в вашем приложении, либо конечный индекс.

Что касается прокрутки, вы можете использовать обработчик событий прокрутки в директиве, чтобы обновить объект службы значением scrollTop смещения, чтобы установить при последующем посещении…. angular.element(containerElement)[0].scrollTop = service.scrollTop в качестве свободного примера

Существует также служба $anchorScroll, которую вы можете использовать, установив ID для каждого элемента

Это не даст вам полного решения, но, надеюсь, поможет вам начать

Обратите внимание, что вам нужно будет учитывать время, необходимое для рендеринга ng-repeat , откладывая на следующий цикл дайджеста, прежде чем пытаться установить scrollTop, если вы используете это