Angular UI Bootstrap Typeahead 指令为每个实例创建不同的 DOM 元素

Question

我正在尝试在几个表中使用Angular UI Bootstrap Typeahead 指令。这些表格中可能有 0 到数千个条目，当我将 typeahead 指令附加到表格行中的每个 <input> 时，它会为每个条目创建一个 DOM 元素！

如果我在页面加载后检查 DOM，我可以在我的 HTML 正文中看到数百个 <!-- ngIf: isOpen() -->。问题是，所有这些预输入都使用相同的源列表来为预输入提供它的数据，所以从技术上讲，我应该只需要 1 个预输入元素，它只是在我的表中的每个输入上重复使用。

目前，我在 typeahead 文档中没有看到允许我们创建 1 个共享 typeahead 元素的配置属性。有什么方法可以轻松地让这个功能正常工作，而无需自己更改 angular bootstrap javascript 或无需从头开始构建 typeahead 指令？

编辑

更糟糕的是，我在表格上进行了分页，如果您在表格的“页面”之间进行更改，该指令会为该页面的每个新实例重新创建更多 <!-- ngIf: isOpen() -->。因此，如果表格以 10 页中的每页 100 个项目开始，如果用户一次点击分页的每一页，他们将在页面上结束 1000 个<!-- ngIf: isOpen() -->。

Answer 1

在包含typeahead 指令的单元格上实现某种查看/编辑状态转换。

在带有typeahead 指令的输入上使用ng-if="row.isEditing" 之类的东西。照原样，您的表将为每一行创建一个 DOM 元素，除非您告诉它不要这样做。当您单击单元格进行编辑时，然后更改编辑模式状态，将按需加载 typeahead 的 DOM 元素。

这个 plunker （有点）像我想到的方法，但它实现了一个完整的编辑行：http://plnkr.co/edit/ivJQ0C

请注意，在该示例中，在满足 ng-if 的条件之前，编辑行的 DOM 元素不存在。