пользовательский интерфейс для виртуализации длинных текстов

Question

Каков наилучший способ отображения очень длинного текста (в мегабайтах) с помощью ui-scroll? Текст доступен в виде массива, но должен отображаться в виде длинного текстового документа, как текстовая область. Я использую ui-scroll, так как каждое слово в тексте является активируемым тегом привязки.

Является ли ui-scroll-td единственным способом отображения каждого слова в виде столбца и строк в виде строки?

Дополнительная информация

1. У меня есть большой массив, содержащий> 2000 элементов (слов), которые могут быть изменены пользователем динамически (как количество элементов, так и сам элемент).

2. Мне нужно отобразить эти элементы как один документ, где каждый элемент (слово) является гиперссылкой, которая при нажатии выполняет определенное действие.

3. Мне это нужно чтобы выглядеть как простой прокручиваемый div, в котором эти слова отображаются в виде длинного свободно текучего кликабельного текста.

4. Ранее я использовал $ compile для динамического создания html, но начальное время компиляции и Компиляция при изменении элемента очень важна (в секундах), так как мне приходится компилировать / отображать весь список элементов каждый раз.

5. Поэтому я подумал об использовании ui-scroll для отображения, которое виртуализирует и отображает только отображаемый контент.

6. Но ui-scroll всегда отображает каждый элемент в отдельной строке, например строка, которая не подходит для моего варианта использования.

Input:
    myList = ["Hello", "World", "This", "is", "my", "first", "dream"].

 desired Output (each word in same line with auto wrap just like a div):

 <div>
     <span ng-repeat="w in myList">
         <a ng-click="someAction()">myList[$index]</a>
         &nbsp; 
     </span>
  </div>

  Hello World This is my first dream

ui-scroll:

    <div>
       <span ui-scroll="at in info">
          <a id="at-{{$index}}" ng-click="someAction($index, $event)">
             myList[$index]}}
          </a>
          &nbsp;
       </span>
      </div>


  ui-scroll output (each word in separate line):
  Hello
   World
   This
   is
   my
   first
   dream

Пожалуйста, обратите внимание, что каждое слово выше является кликабельным якорем , Спасибо.

Answer 1

К сожалению, это абсолютно невозможно с angular -ui-scroll, так как он не поддерживает встроенные / плавающие элементы. В 2015 году было несколько попыток реализовать эту функцию, но теперь она кажется застывшей навсегда.

---

Бесконечный подход

На случай, если вы развиваются очень интересно. В качестве возможного обходного пути я бы посоветовал попробовать «бесконечный» подход вместо «виртуализации». Бесконечная прокрутка может быть реализована без дополнительных библиотек, идея может быть разбита на следующие шаги:

• изначально добавить N слов в область просмотра
• , если scrollHeight в окне просмотра clientHeight, добавьте еще N слов; заставляйте al oop, пока не появится полоса прокрутки
• прослушайте изменение scrollTop области просмотра, вызовите следующее, когда произойдет прокрутка
• , если scrollTop + clientHeight === scrollHeight add N больше слов; также в al oop до тех пор, пока высота окна просмотра (scrollHeight) не увеличится или пока слова не будут превышены

Это должно значительно снизить стоимость начального рендеринга, но так как элементы из представление не уничтожается, общая производительность будет уменьшаться при каждом внедрении новых элементов.

---

Виртуализация

После реализации "бесконечного" подхода, я думаю Вы можете попытаться превратить этот конкретный случай бесконечной прокрутки в виртуальный. Давайте подумаем, что может потребоваться. Во-первых, вам понадобятся два дополнительных элемента, скажем, верхний и нижний элементы заполнения, которые будут эмулировать виртуальные слова. Затем вам нужно будет продлить последний шаг «бесконечного» подхода следующим образом:

• посмотрите в противоположном направлении и найдите первый элемент, который виден в окне просмотра; это можно сделать несколькими способами ( здесь и сотнями других ссылок)
• запомнить scrollHeight, обрезать все элементы перед найденным, установить высоту верхнего элемента заполнения в запомненное значение, чтобы сделать результат scrollHeight таким же, как и до отсечения
• , зависит от условий / требований, вам также может понадобиться исправить положение прокрутки, так как оно может подпрыгнуть во время отсечения; Я бы не хотел обсуждать здесь прыжки в обратном направлении, просто будьте довольны стандартным поведением overflow-anchor (хотя вам придется забыть об Edge и других грустных парнях)
• условие scrollTop + clientHeight === scrollHeight в нашем обработчике (скажем, «если мы находимся в самом низу») следует пересмотреть, поскольку у нас может быть ненулевой нижний элемент заполнения; таким образом, это должно быть похоже на «если мы находимся в самом низу ИЛИ, если нижний элемент заполнения становится видимым»
• , если указанное выше условие выполняется, вам нужно снова и снова добавлять N слов, пока нижний отступ не станет невидимым снова, и каждая инъекция должна выполняться с уменьшением высоты нижнего набивочного элемента на величину, с которой увеличивается область просмотра scrollHeight; и только крайний случай, когда «мы находимся в самом низу» вызовет безвозвратное увеличение scrollHeight

в области просмотра. Таким образом, мы должным образом охватим прокрутку вниз. Вы, очевидно, должны будете принять во внимание прокрутку вверх и запустить аналогичную процедуру, когда «верхний отступ становится видимым ИЛИ мы на самом верху». Кроме того, условия «мы находимся сверху / снизу» и «элемент становится видимым» могут быть расширены с помощью некоторых удобных для UX дельт, скажем, «мы почти на ...» и «элемент почти видим».

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