如何保存DOM操作更改？

Question

我的控制器中的部分代码删除了一个DOM元素：

MetrofficeApp.controller('EmployeesCtrl', function($scope) {
...
angular.element(deleteElem).remove();
$scope.$apply();

当我使用angular离开此页面时，然后返回到已删除元素所在的同一页面 - 元素再次可见。

除了$ scope之外我还能做什么。$ apply（）在导航页面之间永久保存（保存DOM更改）？

Answer 1

我觉得你对DOM有一个根本的误解。每次导航回页面时，都会重新调用所有代码并重新创建模板。因此，再次创建DOM是正确的行为。

我的猜测是你有一些由DOM可视化的底层模型。您应该删除由DOM可视化的模型部分（并将该更改推送到服务器），而不是删除DOM的组件。这样，下次导航到DOM时，模型是一致的，并且不再显示已删除的项目。

还有一点，但仍然很重要：控制器不应该直接操作DOM。你应该为此创建指令。

Answer 2

你需要在scope对象上设置一些标志，角度js模板可以使用它来确定是否显示有问题的dom元素。

E.g。

// controller code
scope.shouldShowElement = some.flag;

// angular template
<div ng-show="shouldShowElement">...</div>

Angular模板可以访问scope上的所有变量 - 如果稍后您执行此操作：

// controller code
scope.shouldShowElement = true;
scope.$apply();

您的模板将更新以反映该更改