AngularJS - 监听所有表 <td> 的 onclick 事件答案

【问题标题】：AngularJS - Listen for onclick events for all table <td>AngularJS - 监听所有表 <td> 的 onclick 事件
【发布时间】：2018-04-18 13:16:34
【问题描述】：

有没有办法使用angular.element(...).on('click', onTdClick);（例如）在每个被点击的地方执行 onTdClick（向它提供元素）？

假设我有 2 个表格，都有单元格和列。
我希望能够点击 CELLS 并将我点击的元素发送到onTdClick($event)。

$scope.onTdClick = function(ev){
    window.getSelection().selectAllChildren(ev.target);
};

基本上做同样的事情：ng-click="onTdClick($event)"，而不必在数百个 <td> 上点击 ng-click

我使用 .insertRow 和 .insertCell 动态添加表格行和表格单元格
https://www.w3schools.com/jsref/met_table_insertrow.asp
所以静态地做angular.element().find('td').on()在这里不会很好用。

我正在尝试做到这一点，因此我可以单击<td> 来基本上通过单击它们来突出显示单元格。高亮代码已经过测试并且可以工作： window.getSelection().selectAllChildren(ev.target);
（其中 ev 是 td 元素）

【问题讨论】：

如果你用*ng-for生成你的表行，你只需要写一次ng-click。
为什么你有数百个<td>s ？你不能用ng-for吗？ ...当然您可以使用angular.element(document).find('td') 匹配页面中的所有tds
@JeremyThille 我通过使用 insertRow() 在 CEFSharp 上的回调生成它。
@OvidiuDolha 是的，但是在执行该代码后添加的 td 不匹配吗？
取决于您将这段代码放在哪里 - 应该有一些方法可以知道什么时候渲染了 comp - 请参阅 stackoverflow.com/questions/11125078/… 和类似问题

【解决方案1】：

您不应该将 insertRow 与 AngularJS 一起使用。相反，您应该将 ng-repeat 与每行都有一个对象的数组一起使用，并在您想要插入一行时推送对象。

$scope.insertRow = function(){
    $scope.tdList.push({});//push whatever you want
}

如果你希望单元格的数量是可变的，你可以在这个对象中存储一些参数来告诉视图该行有多少个单元格，并在里面放一个嵌套的 ng-repeat 来创建单元格

【讨论】：

出于性能原因，我专门做 insertRow。经过一段时间后，最终会出现数千行，并且经过所有 AngularJS 的检查后，它会变得非常缓慢。
我明白你的意思。但我仍然建议您使用一些技巧来提高 ng-repeat 的性能，即使您可以执行 ng-repeat 静态操作，并且仅在您告诉 Angular 执行时才寻找更改。我想这对你来说会容易得多。看看这篇文章，例如：codelord.net/2017/01/25/…
它仍然不需要检查等，而使用 insertRow，我只是这样做，完成。我不会使用 ng-repeat。