Question

在我的Angular应用程序中，一个名为CaptureMovements的指令负责高亮一行并捕获它的内容。

<tr ng-repeat="element in body" capture-movements='{{element}}' >

这也可以在以下plnkr中的文件layout.html中观察到： http://plnkr.co/edit/fB8RLOXpkiUZqRzhTKfj

因此，如果您运行plnkr，然后在键盘上按g然后按1（g + 1），您会注意到一行突出显示。 Eveytime你点击g然后另一行突出显示。

现在，如果表有数百行，这会减慢应用程序的速度（必须是广播和接收机制）。

理想情况下，这个问题如何以角度解决？

任何线索都表示赞赏。

Answer 1

AngularJS的方法是向每一行添加一个指令，并像你一样对键击事件作出反应。有多种方法不涉及“广播”击键事件，但它确实涉及将每个指令放在各个行上 - 它可以是您的情况下的自定义指令，也可能是条件适用的ng-class指令类。

无论哪种方式，由于放置了大量的观察者，您将面临大量行的性能问题。

最简单的方法是使用原生Javascript方式。考虑一下 - 假设您的应用程序不使用AngularJS。甚至不要想到jQuery。

现在，你如何编写你的javascript代码来执行相同的功能？最初从选择表的所有n行开始并存储它。

var tableRows = document.getElementById('myCustomTable')
                        .getElementByTagName('tr');

这将选择表格的所有行。是的，它将是性能密集型的，但不如在每一行上放置单独的指令那么多。

现在，为keystroke元素设置一个事件处理程序，然后将边框应用于第n行并从第（n-1）行中删除边框。

，您不必每次都获取第n行，因为您之前已经将其存储起来并存储了它。