Question

我有一个类似电子表格的表格设置，其中内置了一些表格元素，这些表格元素使用angular来启用编辑，包括行选择/删除功能。这是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方法，它删除基础行对象并从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应该删除某些内容。这就是问题的根源。

因此，您有两个选择：

使用ng-if等标准AngularJs工具
创建一个桥接指令，该指令将捕获remove事件并通知AngularJs。 here说明了如何使用$ destroy。 here中介绍了如何处理DOM节点删除事件。

是的，混合使用AngularJs和jQuery甚至是本机DOM API都会给您带来很多问题

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

1 个答案: