Angularjs 用于长文本虚拟化的ui滚动

使用ui滚动显示超长文本（以MB为单位）的最佳方式是什么？文本以数组的形式提供，但需要像文本区域一样显示为长文本文档。我使用的是ui滚动，因为文本中的每个单词都是可单击的锚定标记

ui scroll td是否是将每个单词显示为一列，将行显示为行的唯一方法

更多信息

我有一个包含>2000个元素（单词）的大数组，可以 由用户动态更改（元素数量和 元素本身）

我需要将这些元素显示为一个单独的文档，其中每个元素（单词）都是一个超链接，单击该超链接可以执行某些操作

我需要它看起来像一个简单的滚动div，其中有这些词显示为长自由流动的可点击文本

我之前使用$compile动态创建html，但初始编译时间和元素更改后的编译非常重要（秒），因为我每次都必须编译/呈现整个元素列表

所以我想到了使用ui滚动来显示，它只虚拟化和呈现显示的内容

但是ui滚动总是在单独的行中显示每个元素，就像一行一样，这不是我的用例所希望的行为

myList[$index]}
ui滚动输出（每行中的每个单词）：
你好
世界
这
是
我的
第一
梦想

请注意，上面的每个单词都是可点击的锚。

---

谢谢。

不幸的是，使用angular ui scroll完全不可能做到这一点，因为它不支持内嵌/浮动元素。本打算在2015年实现此功能，但现在似乎永远冻结

---

无限逼近

您正在开发的案例非常有趣。作为一种可能的解决方法，我建议尝试“无限”方法，而不是“虚拟化”方法。无限卷轴可以在没有其他库的情况下实现，这个想法可以分为以下步骤：

• 最初在视口中添加N个单词
• 如果视口的

  滚动高度

  ==

  clientHeight

  ，则再添加N个单词；循环直到滚动条出现
• 监听视口的

  scrollTop

  更改，在发生滚动时调用以下命令
• 如果

  scrollTop

  +

  clientHeight

  ==

  scrollHeight

  添加N个单词；也在循环中，直到视口的高度（

  scrollHeight

  ）增加或文字结束

这将大大降低初始渲染的成本，但由于视图外的元素不会被破坏，因此每次新元素注入都会降低总体性能

---

虚拟化

在“无限”方法实现之后，我认为您可以尝试将这个特定的无限滚动案例转换为虚拟案例。让我们想想可能需要什么。首先，您将需要两个额外的元素，例如，顶部和底部填充元素，它们将模拟虚拟单词。然后，您需要通过以下方式扩展“无限”方法的最后一步：

• 朝相反方向看，找到视口中可见的第一个元素；这可以通过多种方式实现（以及数百个其他链接）
• 记住

  scrollHeight

  ，剪掉找到的元素之前的所有元素，将顶部填充元素的高度设置为记忆值，使结果

  scrollHeight

  与剪贴之前相同
• 根据环境/要求，您可能还需要更正滚动位置，因为它可能会在剪辑过程中向上跳跃；我不想在这里讨论向后跳，只是对默认的行为感到高兴（尽管你必须忘记Edge和其他悲伤的家伙）
• 应重新考虑处理程序中的条件

  scrollTop

  +

  clientHeight

  =

  scrollHeight

  （例如，“如果我们位于最底部”），因为我们可能有非零底部填充元素；因此，它应该像“如果我们在最底部，或者如果底部填充元素变得可见”
• 如果满足上述条件，则需要一次又一次地添加N个单词，直到底部填充再次变为不可见，并且每次注入都应通过将底部填充元素的高度降低视口的

  滚动高度

  增加的值来完成；只有“我们在最底部”的边缘情况才会导致视口的

  滚动高度不可撤销地增加

这样，我们将正确地覆盖向下滚动。显然，您需要考虑向上滚动，并在“顶部填充可见或我们位于最顶部”时运行类似的过程。此外，“我们处于最顶端/最底端”和“元素变得可见”条件可以通过一些用户体验友好的增量进行扩展，例如，“我们几乎处于……”和“元素几乎可见”

---

我不认为这个计划涵盖或应该涵盖所有可能的边缘案例和需求，它只是一个如何从头开始的想法，我猜这是你唯一的方法，我的意思是完全由你自己实现。如果我错了，我会很高兴，并且很愿意看看别人现成的解决方案。

1。你目前的问题是什么，2。你的数据是什么样子的。你希望它看起来怎么样？嗨@theMayer:我添加了更多细节。

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