为什么我们不应该将 DOM 代码与 Angular 代码混合使用？答案

【问题标题】：Why are we NOT supposed to mix DOM code with Angular code?为什么我们不应该将 DOM 代码与 Angular 代码混合使用？
【发布时间】：2022-01-26 23:53:49
【问题描述】：

我正在设计一个主网格和子网格，通过单击主网格的一行，子网格中的数据会相应更改。为此，在单击主网格的一行后，我从子控制器调用 reloadItmes()，如下所示：

$("#masterTable tbody").on("click", "tr", function (event) {
    event.preventDefault();
    jQuery(this).addClass('selected').siblings().removeClass('selected');
    angular.element($('#childTable')).scope().reloadItems();
});

但是，我发现将 DOM 代码与 Angular 代码混合不是一个好习惯，但我不知道这段代码会导致什么问题。

【问题讨论】：

标签： html jquery angularjs dom

【解决方案1】：

因为 angular scope 和 dom 的冲突。实际上它们处于不同的时间周期，将它们混合在一起并不是一个好主意。我遇到了这个问题，最后我不得不以角度调用一个假函数来强制它读取我的 dom 更改并应用它们。这完全是一个同步问题。

因此，如果您可以将两个代码部分都放在一个控制器中，或者全部使用纯 js 完成，那么结果将具有更好的性能，并且更容易扩展或理解。

【讨论】：

“它们处于不同的时间周期”。 100%。想象一下，在同一辆车上有来自两个不同制造商的 2 个发动机。这有点矫枉过正，可能会出现意想不到的结果。