使用 jQuery 删除元素后，AngularJS 观察者仍然触发？

Question

我有一个类似电子表格的表格设置，它使用表格元素构建，这些表格元素使用角度来启用编辑，包括行选择/删除功能。 这是一个 html，如果它“被选中”，它可以突出显示一行：

    <tr row-id="0" ng-class="selectedClass(5)" class="ng-scope budget-row">
      <td>
        <label id="foo" ng-hide="some_function(5)">{{row(5).value}}</label>
        <input type="text" ng-hide="!some_function(5)">
      </td>
      <td>...</td>
    </tr>

ng-class="selectedClass(5)" 用于在选中时为行应用背景色。

一旦选择了一行，就可以“剪切”它。在作用域上调用 cut 方法，它会移除底层的 row 对象并从 Dom 中移除元素，如下所示：

 let el = angular.element("#foo");
 let deleteTarget = el.parent().parent();
 deleteTarget.remove();

这一切在页面上都可以正常工作，但我可以在控制台和堆栈跟踪中看到，即使从页面中删除了已删除的行，ng-class 指令仍然明显地触发它们。虽然它现在工作正常，但如果所有已删除的行仍在通过角度检查更改，即使它们不再出现在页面上，我可以看到它变得非常慢。

这是从已删除的元素调用“isSelected”函数的堆栈跟踪。

isSelected (budget_items.self-e32480dfbdba1522e84f3891a1bef58643f758332acf63bc6a7e4b06bfee6b49.js?body=1:688)
$scope.selectedClass (budget_items.self-e32480dfbdba1522e84f3891a1bef58643f758332acf63bc6a7e4b06bfee6b49.js?body=1:50)
fn (VM700:4)
expressionInputWatch (angular.self-78d77e4a3c91d5788f4be38711bc43955307738d52116f065bc1289f6abc3523.js?body=1:16661)
$digest (angular.self-78d77e4a3c91d5788f4be38711bc43955307738d52116f065bc1289f6abc3523.js?body=1:18364)
$apply (angular.self-78d77e4a3c91d5788f4be38711bc43955307738d52116f065bc1289f6abc3523.js?body=1:18641)
(anonymous) (angular.self-78d77e4a3c91d5788f4be38711bc43955307738d52116f065bc1289f6abc3523.js?body=1:27469)
dispatch (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:5184)
elemData.handle (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:4992)

Answer 1

AngularJs 使用名为：$destroy 的特殊事件来删除观察者并进行所有清理工作。当你使用 jQuery 时，Angular 不会被通知应该删除某些东西。这就是问题的根源。

所以你有两个选择：

1. 使用标准 AngularJs 工具，例如 ng-if
2. 创建一个桥接指令，该指令将捕获删除事件并通知 AngularJs。如何使用 $destroy 描述了here。如何处理 DOM 节点删除事件描述 here。

是的，混合 AngularJs 和 jQuery 甚至原生 DOM API 会给你带来很多问题